D
D
Dmitry2019-03-27 12:53:16
Laravel
Dmitry, 2019-03-27 12:53:16

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;

Maybe I need to move the child route inside the parent route component? How to do it right? If you do this, you will have to duplicate the child route in each parent.
And yet, I have a laravel admin panel. Maybe this is the problem?
Here is the file
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', '.*');

Thanks?

Answer the question

In order to leave comments, you need to log in

1 answer(s)
A
Anton Spirin, 2019-03-27
@ddimonn8080

Links by id.

It's better to use slug.
Firstly, not route, but route. Secondly, it is not clear what and where you created. Apparently, we are talking about /shop and /shop/:productId?
Wang problems with links to statics. They are most likely built relative to the path in the browser line. Just open the network tab and check. This, by the way, is exactly what you should have done in the first place.
No. It doesn't make any sense. I advise you to look into the source codes of the Router, Switch and Route components to understand how it works.

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question