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

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|Poppins: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  id="top"> 
        <div  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 >     
                @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>

CodePudding user response：

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

CodePudding user response：

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.