'Why Laravel component does not render correctly? Depends on the route?

When I hit http://127.0.0.1:8000/welcome everything renders fine. But with http://127.0.0.1:8000/hh/welcome the page looks like it has no CSS references or anything at all.

Any idea why it is like this and how to solve it? Thanks a lot!

routes > web.php

Route::get('/hh/welcome', [BikeController::class, 'show']);
Route::get('welcome', [BikeController::class, 'show']);

app > Http > Controllers > BikeController.php

    public function show(Bike $bike)
    {
        return view('bikes.show', [
            'bike' => $bike
        ]);
    }

resources > views > bikes > show.blade.php

<x-layout>
<h1>Hello World!</h1>
</x-layout>

resources > views > components > layout.blade.php

<!DOCTYPE html>
<html lang="de" dir="ltr">
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />

    <title>BM | Dashboard &amp; Web App Template</title>

    <link rel="apple-touch-icon" sizes="180x180" href="assets/img/favicons/apple-touch-icon.png" />
    <link rel="icon" type="image/png" sizes="32x32" href="assets/img/favicons/favicon-32x32.png" />
    <link rel="icon" type="image/png" sizes="16x16" href="assets/img/favicons/favicon-16x16.png" />
    <link rel="shortcut icon" type="image/x-icon" href="assets/img/favicons/favicon.ico" />
    <link rel="manifest" href="assets/img/favicons/manifest.json" />
    <meta name="msapplication-TileImage" content="assets/img/favicons/mstile-150x150.png" />
    <meta name="theme-color" content="#ffffff" />
    <script src="assets/js/config.js"></script>
    <script src="vendors/overlayscrollbars/OverlayScrollbars.min.js"></script>

    <link rel="preconnect" href="https://fonts.gstatic.com" />
    <link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,500,600,700%7cPoppins:300,400,500,600,700,800,900&amp;display=swap" rel="stylesheet" />
    <link href="vendors/overlayscrollbars/OverlayScrollbars.min.css" rel="stylesheet" />
    <link href="assets/css/theme-rtl.min.css" rel="stylesheet" id="style-rtl" />
    <link href="assets/css/theme.min.css" rel="stylesheet" id="style-default" />
    <link href="assets/css/user-rtl.min.css" rel="stylesheet" id="user-style-rtl" />
    <link href="assets/css/user.min.css" rel="stylesheet" id="user-style-default" />
    <script> 
        var isRTL = JSON.parse(localStorage.getItem("isRTL")); 
        if (isRTL) {   
            var linkDefault = document.getElementById("style-default");   
            var userLinkDefault = document.getElementById("user-style-default");   
            linkDefault.setAttribute("disabled", true);   
            userLinkDefault.setAttribute("disabled", true);   
            document.querySelector("html").setAttribute("dir", "rtl"); 
        } else {   
            var linkRTL = document.getElementById("style-rtl");   
            var userLinkRTL = document.getElementById("user-style-rtl");   
            linkRTL.setAttribute("disabled", true);   
            userLinkRTL.setAttribute("disabled", true); 
        }
    </script>
  </head>

  <body>
    <main class="main" id="top"> 
        <div class="container" data-layout="container">   
            <script>     
                var isFluid = JSON.parse(localStorage.getItem("isFluid"));     
                if (isFluid) {       
                    var container = document.querySelector("[data-layout]");       
                    container.classList.remove("container");       
                    container.classList.add("container-fluid");     
                }   
            </script>      
            @include('_nav-vertical')   
            <div class="content">     
                @include('_nav-top')
                {{ $slot }}
                @include('_footer')   
            </div>   
            {{-- @include('_modal')  --}}
        </div>
    </main>

    <script src="vendors/popper/popper.min.js"></script>
    <script src="vendors/bootstrap/bootstrap.min.js"></script>
    <script src="vendors/anchorjs/anchor.min.js"></script>
    <script src="vendors/is/is.min.js"></script>
    <script src="vendors/echarts/echarts.min.js"></script>
    <script src="vendors/fontawesome/all.min.js"></script>
    <script src="vendors/lodash/lodash.min.js"></script>
    <script src="https://polyfill.io/v3/polyfill.min.js?features=window.scroll"></script>
    <script src="vendors/list.js/list.min.js"></script>
    <script src="assets/js/theme.js"></script>
  </body>
</html>
phplaravelcomponents


Solution 1:[1]

Because you are currently loading your CSS relative to your URL

Try the following:

    <link href="{{asset('assets/css/example.css')}}" rel="stylesheet"/>

or take a look at: https://laravel.com/docs/9.x/helpers#method-asset

Solution 2:[2]

You are loading assets in the wrong way actually in your layout.blade.php made these modifications. Then it will work fine. Apply this to your all assets like Images, CSS, and JS files. Apply asset function with every asset like this in curly braces.

<link href="{{ asset('assets/css/theme-rtl.min.css') }}" rel="stylesheet" id="style-rtl" />

Apply this on all CSS also on JS like this

<script src="{{ asset('vendors/popper/popper.min.js') }}"></script>

Also make sure all files are aviable on disk.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Wouter Comello
Solution 2 M Umer Yasin

Related Questions