I am using the laravel 11 blade starter kit for my project. I have a route for the display a particular property like this:
Route::get('property/{property}', [PageController::class, 'property_id'])->name('property_id');
but I then changed it to this:
Route::get('/{property}', [PageController::class, 'property_id'])->name('property_id');
I did this because with the first example I gave I was having issues with some images and css files not loading from my public folder, causing images not to show and some css not to work.
Now, when i changed to the other example, which is this:
Route::get('/{property}', [PageController::class, 'property_id'])->name('property_id');
The images and css/js files started working on the page, but with that i later found out that none of the authentication pages was displaying. Rather, I got the 404 not found on the login, register and other authentication pages.
This is my page.blade.php file located in view/layouts/page.blade.php
<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
<title>{{ config('app.name', 'FidGlobalProperty') }}</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="utf-8">
<meta name="csrf-token" content="{{ csrf_token() }}">
<!-- External CSS libraries -->
<link rel="stylesheet" type="text/css" href="{{ asset('css/bootstrap.min.css') }}">
<link rel="stylesheet" type="text/css" href="{{ asset('css/animate.min.css') }}">
<link rel="stylesheet" type="text/css" href="{{ asset('css/bootstrap-submenu.css') }}">
<link rel="stylesheet" type="text/css" href="{{ asset('css/bootstrap-select.min.css') }}">
<link rel="stylesheet" href="{{ asset('css/leaflet.css') }}" type="text/css">
<link rel="stylesheet" href="{{ asset('css/map.css') }}" type="text/css">
<link rel="stylesheet" type="text/css" href="{{ asset('fonts/font-awesome/css/font-awesome.min.css') }}">
<link rel="stylesheet" type="text/css" href="{{ asset('fonts/flaticon/font/flaticon.css') }}">
<link type="text/css" rel="stylesheet" href="{{ asset('fonts/bootstrap-icons/bootstrap-icons.css') }}">
<link rel="stylesheet" type="text/css" href="{{ asset('fonts/linearicons/style.css') }}">
<link rel="stylesheet" type="text/css" href="{{ asset('css/jquery.mCustomScrollbar.css') }}">
<link rel="stylesheet" type="text/css" href="{{ asset('css/dropzone.css') }}">
<link rel="stylesheet" type="text/css" href="{{ asset('css/magnific-popup.css') }}">
<link rel="stylesheet" type="text/css" href="{{ asset('css/slick.css') }}">
<!-- Custom stylesheet -->
<link rel="stylesheet" type="text/css" href="{{ asset('css/initial.css') }}">
<link rel="stylesheet" type="text/css" href="{{ asset('css/style.css') }}">
<link rel="stylesheet" type="text/css" id="style_sheet" href="{{ asset('css/skins/default.css') }}">
<!-- Favicon icon -->
<link rel="shortcut icon" href="{{ asset('img/logos/logo.png') }}" type="image/x-icon">
<!-- Google fonts -->
<link rel="stylesheet" type="text/css"
href="https://fonts.googleapis.com/css?family=Open+Sans:400,300,600,700,800%7CPlayfair+Display:400,700%7CRoboto:100,300,400,400i,500,700">
<link
href="https://fonts.googleapis.com/css2?family=Nunito:wght@200;300;400;600;700;900&family=Roboto:wght@400;500;700&display=swap"
rel="stylesheet">
<link
href="https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@100;300;400;500;600;700;800;900&display=swap"
rel="stylesheet">
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
<link rel="stylesheet" type="text/css" href="{{ asset('css/ie10-viewport-bug-workaround.css') }}">
<script src="{{ asset('js/ie-emulation-modes-warning.js') }}"></script>
@vite(['resources/js/app.js'])
</head>
<body>
<!-- Top header start -->
<header class="top-header th10 d-none d-lg-block d-md-block" id="top-header-1">
<div class="container">
<div class="row">
<div class="col-lg-8 col-md-8 col-sm-7 col-7">
<div class="list-inline">
<a href="tel:+55-4XX-634-7071"><i class="fa fa-phone"></i>Need Support? +00-4X6-634-781</a>
<a href="tel:info@FidGlobalProperty.com"><i class="fa fa-envelope"></i>info@FidGlobalProperty.com</a>
</div>
</div>
<div class="col-lg-4 col-md-4 col-sm-5 col-5">
<ul class="top-social-media pull-right">
@guest
<li>
<a href="{{ url('/login') }}" class="sign-in"><i class="fa fa-user"></i></a>
</li>
@endguest
@auth
<li>
<form method="POST" action="{{ route('logout') }}">
@csrf
<a :href="route('logout')" class="button btn-3"
onclick="event.preventDefault();
this.closest('form').submit();">
Log Out
<i class="fa fa-sign-in"></i>
</a>
</form>
</li>
@endauth
</ul>
</div>
</div>
</div>
</header>
<!-- Top header end -->
<!-- Main header start -->
<header class="main-header sticky-header header-fixed" id="main-header-1">
<div class="container">
<nav class="navbar navbar-expand-lg navbar-light">
<a class="navbar-brand logo" href="{{ url('/') }}">
<img src="{{ asset('img/logos/logo.png') }}" alt="logo">
</a>
<button class="navbar-toggler" id="drawer" type="button">
<span class="fa fa-bars"></span>
</button>
<div class="navbar-collapse collapse w-100 justify-content-end" id="navbar">
<ul class="navbar-nav ustify-content-start w-100">
<li class="nav-item">
<a class="nav-link" href="{{ url('/') }}">
Home
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="{{ url('/about') }}">
About
</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link" href="{{ url('/properties') }}">
Properties
</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link" href="{{ url('/services') }}">
Services
</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link" href="{{ url('/contact') }}">
Contact
</a>
</li>
@auth
<li class="nav-item submit-property-button">
<a href="{{ route('admin.post_property') }}" class="button btn-3">
Submit Property
</a>
</li>
@endauth
</ul>
</div>
</nav>
</div>
</header>
<!-- Main header end -->
<!-- Sidenav start -->
<nav id="sidebar" class="nav-sidebar">
<!-- Close btn-->
<div id="dismiss">
<i class="fa fa-close"></i>
</div>
<div class="sidebar-inner">
<div class="sidebar-logo">
<a href="{{ url('/') }}">
<img src="{{ asset('img/logos/logo.png') }}" alt="sidebarlogo">
</a>
</div>
<div class="sidebar-navigation">
<h3 class="heading">Pages</h3>
<ul class="menu-list">
<li><a href="{{ url('/') }}">Home</a></li>
<li class="nav-item">
<a class="nav-link" href="{{ url('/about') }}">
About
</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link" href="{{ url('/properties') }}">
Properties
</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link" href="{{ url('/services') }}">
Services
</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link" href="{{ url('/contact') }}">
Contact
</a>
</li>
@auth
<li class="nav-item">
<a href="{{ route('admin.post_property') }}" class="button btn-3">
Submit Property
</a>
</li>
@endauth
</ul>
</div>
<div class="get-in-touch">
<h3 class="heading">Get in Touch</h3>
<div class="sidebar-contact-info">
<div class="icon">
<i class="fa fa-phone"></i>
</div>
<div class="body-info">
<a href="tel:0477-0477-8556-552">0477 8556 552</a>
</div>
</div>
<div class="sidebar-contact-info">
<div class="icon">
<i class="fa fa-envelope"></i>
</div>
<div class="body-info">
<a href="#">info@FidGlobalProperty.com</a>
</div>
</div>
<div class="sidebar-contact-info mb-0">
<div class="icon">
<i class="fa fa-fax"></i>
</div>
<div class="body-info">
<a href="tel:0477-0477-8556-552">0266 8556 787</a>
</div>
</div>
</div>
</div>
</nav>
<!-- Sidenav end -->
@yield('page')
<!-- Footer start -->
<footer class="main-footer clearfix">
<div class="container">
<!-- Footer info-->
<div class="footer-info">
<div class="row">
<!-- About us -->
<div class="col-lg-4 col-md-6 col-sm-6 col-xs-12">
<div class="footer-item fi2">
<div class="main-title-4">
<h1>Contact Us</h1>
</div>
<ul class="personal-info">
<li>
<i class="fa fa-map-marker"></i>
Address: 360 Harvest St, North Subract, London. United States Of Amrica.
</li>
<li>
<i class="fa fa-envelope"></i>
Email:<a href="mailto:sales@hotelempire.com">info@FidGlobalProperty.com</a>
</li>
<li>
<i class="fa fa-phone"></i>
Phone: <a href="tel:+55-417-634-7071">+0477 85X6 552</a>
</li>
<li>
<i class="fa fa-fax"></i>
Fax: +0487 85X6 224
</li>
</ul>
</div>
</div>
<!-- Links -->
<div class="col-lg-4 col-md-6 col-sm-6 col-xs-12">
<div class="footer-item">
<div class="main-title-4">
<h1>Links</h1>
</div>
<ul class="links">
<li>
<a href="{{ url('/') }}">Home</a>
</li>
<li>
<a href="{{ url('/about') }}">About Us</a>
</li>
<li>
<a href="{{ url('/contact') }}">Contact Us</a>
</li>
<li>
<a href="blog-single-sidebar-right.html">Blog</a>
</li>
<li>
<a href="blog-single-sidebar-right.html">Services</a>
</li>
<li>
<a href="properties-list-rightside.html">Properties Listing</a>
</li>
<li>
<a href="properties-details.html">Properties Details</a>
</li>
</ul>
</div>
</div>
<!-- Subscribe -->
<div class="col-lg-4 col-md-6 col-sm-6 col-xs-12">
<div class="footer-item">
<div class="main-title-4">
<h1>Subscribe</h1>
</div>
<div class="newsletter clearfix">
<p>Sign Up for Our Newsletter to get Latest Updates and Offers. Subscribe to receive
news in your inbox. Lorem Ipsum</p>
<form class="form-inline d-flex" action="#">
<input class="form-control" type="email" id="email"
placeholder="Email Address...">
<button class="btn button-theme" type="submit"><i
class="fa fa-paper-plane"></i></button>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="copy-right">
<div class="container">
<div class="row clearfix">
<div class="col-lg-6 col-md-12 col-sm-12">
<p>© 2022 <a href="http://FidGlobalProperty.com/" target="_blank">Theme Vessel</a>. All
Rights
Reserved.</p>
</div>
<div class="col-lg-6 col-md-12 col-sm-12">
<ul class="social-list clearfix">
<li>
<a href="#" class="facebook-bg">
<i class="fa fa-facebook"></i>
</a>
</li>
<li>
<a href="#" class="twitter-bg">
<i class="fa fa-twitter"></i>
</a>
</li>
<li>
<a href="#" class="linkedin-bg">
<i class="fa fa-linkedin"></i>
</a>
</li>
<li>
<a href="#" class="google-bg">
<i class="fa fa-google-plus"></i>
</a>
</li>
<li>
<a href="#" class="rss-bg">
<i class="fa fa-rss"></i>
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</footer>
<!-- Footer end -->
<!-- Property Video Modal -->
<div class="modal property-modal fade" id="propertyModal" role="dialog" aria-hidden="true">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-bs-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<div class="row modal-raw g-0">
<div class="col-lg-5 modal-left">
<div class="modal-left-content">
<div id="carouselExampleControlsNoTouching" class="carousel slide"
data-bs-touch="false" data-bs-interval="false">
<div class="carousel-inner">
<div class="carousel-item active">
<iframe class="modalIframe w-100"
src="https://www.youtube.com/embed/V7IrnC9MISU"
allowfullscreen></iframe>
</div>
<div class="carousel-item">
<img src="{{ asset('img/img-1.jpg') }}" alt="model-photo"
class="w-100 img-fluid">
</div>
<div class="carousel-item">
<img src="{{ asset('img/img-2.jpg') }}" alt="model-photo"
class="w-100 img-fluid">
</div>
</div>
<button class="carousel-control-prev" type="button"
data-bs-target="#carouselExampleControlsNoTouching" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</button>
<button class="carousel-control-next" type="button"
data-bs-target="#carouselExampleControlsNoTouching" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
</div>
</div>
<div class="col-lg-7 modal-right">
<div class="modal-right-content bg-white">
<div class="heading comon-section">
<h2>Find Your Dream House</h2>
<p class="location">123 Kathal St. Tampa City,</p>
</div>
<div class="features comon-section">
<strong class="price">
$178,000
</strong>
<section>
<h3>Features</h3>
</section>
<ul class="bullets">
<li><i class="flaticon-air-conditioner"></i>Air conditioning</li>
<li><i class="flaticon-wifi"></i>Wifi</li>
<li><i class="flaticon-transport"></i>Parking</li>
<li><i class="flaticon-people-2"></i>Pool</li>
<li><i class="flaticon-weightlifting"></i>Gym</li>
<li><i class="flaticon-building"></i>Alarm</li>
<li><i class="flaticon-old-telephone-ringing"></i>Balcony</li>
<li><i class="flaticon-monitor"></i>TV</li>
</ul>
</div>
<div class="0verview comon-section cs-none">
<section>
<h3>Overview</h3>
</section>
<dl>
<dt>Model</dt>
<dd>Maxima</dd>
<dt>Condition</dt>
<dd>Brand New</dd>
<dt>Year</dt>
<dd>2018</dd>
<dt>Price</dt>
<dd>$178,000</dd>
</dl>
<a href="properties-details.html" class="btn button-sm button-theme">Show
Detail</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="{{ asset('js/jquery.min.js') }}"></script>
<script src="{{ asset('js/bootstrap.bundle.min.js') }}"></script>
<script src="{{ asset('js/bootstrap-submenu.js') }}"></script>
<script src="{{ asset('js/rangeslider.js') }}"></script>
<script src="{{ asset('js/jquery.mb.YTPlayer.js') }}"></script>
<script src="{{ asset('js/wow.min.js') }}"></script>
<script src="{{ asset('js/bootstrap-select.min.js') }}"></script>
<script src="{{ asset('js/jquery.easing.1.3.js') }}"></script>
<script src="{{ asset('js/jquery.scrollUp.js') }}"></script>
<script src="{{ asset('js/jquery.mCustomScrollbar.concat.min.js') }}"></script>
<script src="{{ asset('js/leaflet.js') }}"></script>
<script src="{{ asset('js/leaflet-providers.js') }}"></script>
<script src="{{ asset('js/leaflet.markercluster.js') }}"></script>
<script src="{{ asset('js/dropzone.js') }}"></script>
<script src="{{ asset('js/jquery.filterizr.js') }}"></script>
<script src="{{ asset('js/jquery.magnific-popup.min.js') }}"></script>
<script src="{{ asset('js/slick.min.js') }}"></script>
<script src="{{ asset('js/maps.js') }}"></script>
<script src="{{ asset('js/sidebar.js') }}"></script>
<script src="{{ asset('js/app.js') }}"></script>
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
<script src="{{ asset('js/ie10-viewport-bug-workaround.js') }}"></script>
<!-- Custom javascript -->
<script src="{{ asset('js/ie10-viewport-bug-workaround.js') }}"></script>
</body>
</html>
Please how can i fix this and make the authentication pages show again?
when i revert back to the first example , the authentication pages started display normally but causing the images and some css/js not to load on the property details page.
Please i need help. Thanks
Answers
It seems like there might be a conflict between your route configuration and how your Laravel application is serving assets. Let's try to troubleshoot the issue step by step:
-
Route Configuration: You mentioned that when you changed your route to
Route::get('/{property}', [PageController::class, 'property_id'])->name('property_id');, the authentication pages stopped working. This might be because Laravel is now interpreting URLs that should be handled by Laravel's routing system as requests for specific properties. -
Asset URLs: When you access your authentication pages, Laravel is likely trying to find the route for those pages (
/login,/register, etc.) based on the URL. However, with the new route configuration, it's interpreting those URLs as requests for properties instead of authentication pages.
Here's how you can fix it:
-
Route Configuration: Keep your route for the property detail page as it was initially:
Route::get('property/{property}', [PageController::class, 'property_id'])->name('property_id');This will ensure that requests to URLs like
/property/123are handled correctly by yourPageController. -
Asset URLs: Ensure that your asset URLs in your Blade templates use the
asset()helper function without any modifications. For example:<link rel="stylesheet" type="text/css" href="{{ asset('css/bootstrap.min.css') }}">This ensures that assets are loaded correctly regardless of the route configuration.
By keeping the route configuration for properties separate from other routes like authentication, you can avoid conflicts and ensure that both your property detail pages and authentication pages work correctly.
