I am getting an routing error in my laravel project
Symfony\Component\Routing\Exception\RouteNotFoundException Route [product.details] not defined. (View: C:\wamp\www\EAnimal\resources\views\livewire\shop-component.blade.php)
App/Http/Livewire/ShopComponent.php
?php
namespace App\Http\Livewire;
use App\Models\Product;
use Livewire\Component;
use Livewire\WithPagination;
use Illuminate\Support\Facades\DB;
class ShopComponent extends Component
{
use WithPagination;
public function render()
{
$products= Product::paginate(12);
return view('livewire.shop-component',['products'=>$products])->layout('layout.base');
}
}
Here is my Route Web.php
<?php
use App\Http\Livewire\HomeComponent;
use App\Http\Livewire\ShopComponent;
use App\Http\Livewire\CartComponent;
use App\Http\Livewire\CheckoutComponent;
use App\Http\Livewire\DetailsComponent;
use App\http\Livewire\Admin\AdminDashboardComponent;
use App\http\Livewire\User\UserDashboardComponent;
use Illuminate\Support\Facades\Route;
/*
|--------------------------------------------------------------------------
| Web Routes
|--------------------------------------------------------------------------
|
| Here is where you can register web routes for your application. These
| routes are loaded by the RouteServiceProvider within a group which
| contains the "web" middleware group. Now create something great!
|
*/
/*Route::get('/', function () {
return view('welcome');
});*/
Route::get('/',HomeComponent::class);
Route::get('/shop',ShopComponent::class);
Route::get('/cart',CartComponent::class);
Route::get('/checkout',CheckoutComponent::class);
Route::get('/product/{slug}',DetailsComponent::class)->name('product.details');
// Route::middleware(['auth:sanctum', 'verified'])->get('/dashboard', function () {
// return view('dashboard');
// })->name('dashboard');
Route::middleware(['auth:sanctum','verified'])->group(function(){
Route::get('/user/dashboard',UserDashboardComponent::class)->name('user.dashboard');
});
Route::middleware(['auth:sanctum','verified','authadmin'])->group(function(){
Route::get('/admin/dashboard',AdminDashboardComponent::class)->name('admin.dashboard');
});
ShopComponent.blade.php
<main id="main" class="main-site left-sidebar">
<div class="container">
<div class="wrap-breadcrumb">
<ul>
<li class="item-link"><a href="#" class="link">home</a></li>
<li class="item-link"><span>Digital & Electronics</span></li>
</ul>
</div>
<div class="row">
<div class="col-lg-9 col-md-8 col-sm-8 col-xs-12 main-content-area">
<div class="banner-shop">
<a href="#" class="banner-link">
<figure><img src="assets/images/shop-banner.jpg" alt=""></figure>
</a>
</div>
<div class="wrap-shop-control">
<h1 class="shop-title">Digital & Electronics</h1>
<div class="wrap-right">
<div class="sort-item orderby ">
<select name="orderby" class="use-chosen" >
<option value="menu_order" selected="selected">Default sorting</option>
<option value="popularity">Sort by popularity</option>
<option value="rating">Sort by average rating</option>
<option value="date">Sort by newness</option>
<option value="price">Sort by price: low to high</option>
<option value="price-desc">Sort by price: high to low</option>
</select>
</div>
<div class="sort-item product-per-page">
<select name="post-per-page" class="use-chosen" >
<option value="12" selected="selected">12 per page</option>
<option value="16">16 per page</option>
<option value="18">18 per page</option>
<option value="21">21 per page</option>
<option value="24">24 per page</option>
<option value="30">30 per page</option>
<option value="32">32 per page</option>
</select>
</div>
<div class="change-display-mode">
<a href="#" class="grid-mode display-mode active"><i class="fa fa-th"></i>Grid</a>
<a href="list.html" class="list-mode display-mode"><i class="fa fa-th-list"></i>List</a>
</div>
</div>
</div><!--end wrap shop control-->
<div class="row">
<ul class="product-list grid-products equal-container">
@foreach($products as $product)
<li class="col-lg-4 col-md-6 col-sm-6 col-xs-6 ">
<div class="product product-style-3 equal-elem ">
<div class="product-thumnail">
<a href="{{route('product.details',['slug'=>$product->slug])}}" title="{{$product->name}}">
<figure><img src="assets/images/products/digital_20.jpg" alt="{{$product->name}}"></figure>
</a>
</div>
<div class="product-info">
<a href="#" class="product-name"><span>{{$product->name}}</span></a>
<div class="wrap-price"><span class="product-price">{{$product->regular_price}}</span></div>
<a href="#" class="btn add-to-cart">Add To Cart</a>
</div>
</div>
</li>
@endforeach
</ul>
</div>
<div class="wrap-pagination-info">
<ul class="page-numbers">
<li><span class="page-number-item current" >1</span></li>
<li><a class="page-number-item" href="#" >2</a></li>
<li><a class="page-number-item" href="#" >3</a></li>
<li><a class="page-number-item next-link" href="#" >Next</a></li>
</ul>
<p class="result-count">Showing 1-8 of 12 result</p>
</div>
</div><!--end main products area-->
<div class="col-lg-3 col-md-4 col-sm-4 col-xs-12 sitebar">
<div class="widget mercado-widget categories-widget">
<h2 class="widget-title">All Categories</h2>
<div class="widget-content">
<ul class="list-category">
<li class="category-item has-child-cate">
<a href="#" class="cate-link">Fashion & Accessories</a>
<span class="toggle-control">+</span>
<ul class="sub-cate">
<li class="category-item"><a href="#" class="cate-link">Batteries (22)</a></li>
<li class="category-item"><a href="#" class="cate-link">Headsets (16)</a></li>
<li class="category-item"><a href="#" class="cate-link">Screen (28)</a></li>
</ul>
</li>
<li class="category-item has-child-cate">
<a href="#" class="cate-link">Furnitures & Home Decors</a>
<span class="toggle-control">+</span>
<ul class="sub-cate">
<li class="category-item"><a href="#" class="cate-link">Batteries (22)</a></li>
<li class="category-item"><a href="#" class="cate-link">Headsets (16)</a></li>
<li class="category-item"><a href="#" class="cate-link">Screen (28)</a></li>
</ul>
</li>
<li class="category-item has-child-cate">
<a href="#" class="cate-link">Digital & Electronics</a>
<span class="toggle-control">+</span>
<ul class="sub-cate">
<li class="category-item"><a href="#" class="cate-link">Batteries (22)</a></li>
<li class="category-item"><a href="#" class="cate-link">Headsets (16)</a></li>
<li class="category-item"><a href="#" class="cate-link">Screen (28)</a></li>
</ul>
</li>
<li class="category-item">
<a href="#" class="cate-link">Tools & Equipments</a>
</li>
<li class="category-item">
<a href="#" class="cate-link">Kid’s Toys</a>
</li>
<li class="category-item">
<a href="#" class="cate-link">Organics & Spa</a>
</li>
</ul>
</div>
</div><!-- Categories widget-->
<div class="widget mercado-widget filter-widget brand-widget">
<h2 class="widget-title">Brand</h2>
<div class="widget-content">
<ul class="list-style vertical-list list-limited" data-show="6">
<li class="list-item"><a class="filter-link active" href="#">Fashion Clothings</a></li>
<li class="list-item"><a class="filter-link " href="#">Laptop Batteries</a></li>
<li class="list-item"><a class="filter-link " href="#">Printer & Ink</a></li>
<li class="list-item"><a class="filter-link " href="#">CPUs & Prosecsors</a></li>
<li class="list-item"><a class="filter-link " href="#">Sound & Speaker</a></li>
<li class="list-item"><a class="filter-link " href="#">Shop Smartphone & Tablets</a></li>
<li class="list-item default-hiden"><a class="filter-link " href="#">Printer & Ink</a></li>
<li class="list-item default-hiden"><a class="filter-link " href="#">CPUs & Prosecsors</a></li>
<li class="list-item default-hiden"><a class="filter-link " href="#">Sound & Speaker</a></li>
<li class="list-item default-hiden"><a class="filter-link " href="#">Shop Smartphone & Tablets</a></li>
<li class="list-item"><a data-label='Show less<i class="fa fa-angle-up" aria-hidden="true"></i>' class="btn-control control-show-more" href="#">Show more<i class="fa fa-angle-down" aria-hidden="true"></i></a></li>
</ul>
</div>
</div><!-- brand widget-->
<div class="widget mercado-widget filter-widget price-filter">
<h2 class="widget-title">Price</h2>
<div class="widget-content">
<div id="slider-range"></div>
<p>
<label for="amount">Price:</label>
<input type="text" id="amount" readonly>
<button class="filter-submit">Filter</button>
</p>
</div>
</div><!-- Price-->
<div class="widget mercado-widget filter-widget">
<h2 class="widget-title">Color</h2>
<div class="widget-content">
<ul class="list-style vertical-list has-count-index">
<li class="list-item"><a class="filter-link " href="#">Red <span>(217)</span></a></li>
<li class="list-item"><a class="filter-link " href="#">Yellow <span>(179)</span></a></li>
<li class="list-item"><a class="filter-link " href="#">Black <span>(79)</span></a></li>
<li class="list-item"><a class="filter-link " href="#">Blue <span>(283)</span></a></li>
<li class="list-item"><a class="filter-link " href="#">Grey <span>(116)</span></a></li>
<li class="list-item"><a class="filter-link " href="#">Pink <span>(29)</span></a></li>
</ul>
</div>
</div><!-- Color -->
<div class="widget mercado-widget filter-widget">
<h2 class="widget-title">Size</h2>
<div class="widget-content">
<ul class="list-style inline-round ">
<li class="list-item"><a class="filter-link active" href="#">s</a></li>
<li class="list-item"><a class="filter-link " href="#">M</a></li>
<li class="list-item"><a class="filter-link " href="#">l</a></li>
<li class="list-item"><a class="filter-link " href="#">xl</a></li>
</ul>
<div class="widget-banner">
<figure><img src="assets/images/size-banner-widget.jpg" width="270" height="331" alt=""></figure>
</div>
</div>
</div><!-- Size -->
<div class="widget mercado-widget widget-product">
<h2 class="widget-title">Popular Products</h2>
<div class="widget-content">
<ul class="products">
<li class="product-item">
<div class="product product-widget-style">
<div class="thumbnnail">
<a href="detail.html" title="Radiant-360 R6 Wireless Omnidirectional Speaker [White]">
<figure><img src="assets/images/products/digital_01.jpg" alt=""></figure>
</a>
</div>
<div class="product-info">
<a href="#" class="product-name"><span>Radiant-360 R6 Wireless Omnidirectional Speaker...</span></a>
<div class="wrap-price"><span class="product-price">$168.00</span></div>
</div>
</div>
</li>
<li class="product-item">
<div class="product product-widget-style">
<div class="thumbnnail">
<a href="detail.html" title="Radiant-360 R6 Wireless Omnidirectional Speaker [White]">
<figure><img src="assets/images/products/digital_17.jpg" alt=""></figure>
</a>
</div>
<div class="product-info">
<a href="#" class="product-name"><span>Radiant-360 R6 Wireless Omnidirectional Speaker...</span></a>
<div class="wrap-price"><span class="product-price">$168.00</span></div>
</div>
</div>
</li>
<li class="product-item">
<div class="product product-widget-style">
<div class="thumbnnail">
<a href="detail.html" title="Radiant-360 R6 Wireless Omnidirectional Speaker [White]">
<figure><img src="assets/images/products/digital_18.jpg" alt=""></figure>
</a>
</div>
<div class="product-info">
<a href="#" class="product-name"><span>Radiant-360 R6 Wireless Omnidirectional Speaker...</span></a>
<div class="wrap-price"><span class="product-price">$168.00</span></div>
</div>
</div>
</li>
<li class="product-item">
<div class="product product-widget-style">
<div class="thumbnnail">
<a href="detail.html" title="Radiant-360 R6 Wireless Omnidirectional Speaker [White]">
<figure><img src="assets/images/products/digital_20.jpg" alt=""></figure>
</a>
</div>
<div class="product-info">
<a href="#" class="product-name"><span>Radiant-360 R6 Wireless Omnidirectional Speaker...</span></a>
<div class="wrap-price"><span class="product-price">$168.00</span></div>
</div>
</div>
</li>
</ul>
</div>
</div><!-- brand widget-->
</div><!--end sitebar-->
</div><!--end row-->
</div><!--end container-->
</main>
