Answer the question
In order to leave comments, you need to log in
Why is routing in react not working correctly for nested routes?
Hello, there are two pages on which there is a list of products with links to these products. Links by id.
Created a route put it near the main route. When clicking on the link when clicking on the product itself, everything works fine. But if this page is reloaded, then the singlrPage component itself is rendered, but images and backgrounds disappear in the header and footer of the site.
import React, {Component} from 'react';
import Footer from './components/footer/Footer';
import Header from './components/header/Header';
import Ancorup from './components/Ancorup';
import { Route, Switch } from 'react-router-dom';
import HomePage from './components/pages/HomePage';
import AboutPage from './components/pages/AboutPage';
import ShopPage from './containers/pages/ShopPage';
import VideotipPage from './components/pages/VideotipPage';
import StockPage from './components/pages/StockPage';
import DoyouknowPage from './components/pages/DoyouknowPage';
import ContactsPage from './components/pages/ContactsPage';
import ErrorPage from './components/pages/ErrorPage';
import ShippingPage from './components/pages/ShippingPage';
import TermsCooperationPage from './components/pages/TermsCooperationPage';
import ProductSinglePage from './components/pages/ProductSinglePage';
class Main extends Component {
render() {
return (
<div>
<div className="content__main test">
<Header/>
<div id="main" className="site__main">
<Switch>
<Route exact path="/" component={ HomePage } />
<Route exact path="/about-cosmetics" component={ AboutPage } />
<Route exact path="/shop" component={ ShopPage } />
<Route exact path={`/shop/:productId`} component={ProductSinglePage} />
<Route exact path="/videotip" component={ VideotipPage } />
<Route exact path="/stock" component={ StockPage }/>
<Route exact path="/doyouknow" component={ DoyouknowPage } />
<Route exact path="/contacts" component={ ContactsPage } />
<Route exact path="/shipping" component={ ShippingPage } />
<Route exact path="/terms-cooperation" component={ TermsCooperationPage } />
<Route component={ ErrorPage } />
</Switch>
</div>
</div>
<Footer/>
<Ancorup/>
</div>
);
}
}
export default Main;
routes/web.php
<?php
/*
|--------------------------------------------------------------------------
| 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('home');
});
Route::get('/{path?}', function($path = null){return View::make('home'); })->where('path', '.*');
Answer the question
In order to leave comments, you need to log in
Links by id.
Didn't find what you were looking for?
Ask your questionAsk a Question
731 491 924 answers to any question