Why routing in react does not work correctly for nested ranting?

Hello, there are two pages on which there is a list of products with links to these products. Links by id.
Created rout put it near the main rout-a. When you click on the link when you click on the product everything works fine. But if the page is reloaded then the component itself is rendered singlrPage but in the header and in the footer of your website missing images, and backgrounds.
import React {Component} from 'react';

import the Footer from './components/footer/Footer';
import the Header from './components/header/Header';
Ancorup import from './components/Ancorup';

import { Route, Switch } from 'react-router-dom';
import HomePage from './components/pages/HomePage';
import aboutpage patrolled from './components/pages/aboutpage patrolled';
ShopPage import from './containers/pages/ShopPage';
VideotipPage import from './components/pages/VideotipPage';
StockPage import from './components/pages/StockPage';
DoyouknowPage import from './components/pages/DoyouknowPage';
ContactsPage import from './components/pages/ContactsPage';
import ErrorPage from './components/pages/ErrorPage';
ShippingPage import from './components/pages/ShippingPage';
TermsCooperationPage import from './components/pages/TermsCooperationPage';
ProductSinglePage import from './components/pages/ProductSinglePage';

class Main extends Component {
 render() {
 return (
the <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 patrolled } />
 <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;

Maybe I need to move a child route of the parent inside the component routes? How to do? If you do so you will have a child Routh duplicating each parent.

And yet, I have admin panel in laravel. Maybe this is the problem?
Here is the file
routes/web.php

<?php

/*
|--------------------------------------------------------------------------
| Web Routes
|--------------------------------------------------------------------------
|
| Here is where you can register routes for your web 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', '.*');


Thank you?
March 19th 20 at 08:48
1 answer
March 19th 20 at 08:50
Solution
Links by id.

It is better to use a slug.

Created rout put it near the main rout-a.

Firstly do not rout and route. Secondly, it is not clear what and where you created. Apparently, we are talking about the /shop and /shop/:productId?

But if the page is reloaded then the component itself is rendered singlrPage but in the header and in the footer of your website missing images, and backgrounds.

Wang problem with links to static. They have most likely built on the way in the browser. Just open the network tab and check. This, incidentally, is exactly what you should have done in the first place.

Maybe I need to move a child route of the parent inside the component routes?

No. This makes no sense. Take a look at the source code of the components, Router, Switch and Route to understand how it works.
Wang problem with links to static. They have most likely built on the way in the browser. Simply open the tab and check. This is exactly what you should have done in the first place.

Explain in detail please - Caterina_Weimann commented on March 19th 20 at 08:53
@Caterina_Weimann, network tab. Corrected. There will be error loading resources. View the URL at which the browser is trying to load. - Adrianna_Run commented on March 19th 20 at 08:56
@Caterina_Weimann, and show how you add image in your code. - Adrianna_Run commented on March 19th 20 at 08:59
@Adrianna_Run, no errors
the image loading so
<div className="headerMiddle__logoLink">
 <img src="uploads/2018/07/header_logo.png" alt="logo"
 className="headerMiddle__img" />
 </div>
- Caterina_Weimann commented on March 19th 20 at 09:02
@Caterina_Weimannyou yourself webpack configured or use create-react-app? If the former, then configure file-loader. In both cases, use the images to import or require.

In any CRA documentation - Adrianna_Run commented on March 19th 20 at 09:05
@Adrianna_Run, figured out what the problem is. All because a relative path instead
<img src="uploads/2018/07/header_logo.png" alt="logo" className="headerMiddle__img" />
need
<img src="/uploads/2018/07/header_logo.png" alt="logo" className="headerMiddle__img" />
- Caterina_Weimann commented on March 19th 20 at 09:08

Find more questions by tags ReactLaravel