Почему роутинг в react не работает правильно для вложенных роутов?

Question

[Дмитрий]

Здравствуйте, есть две страницы на которых есть вывод списка товаров с ссылками на эти товары. Ссылки по id.
Создал rout положил его возле основного rout-а. При переходе по ссылке при клике на самом товаре все работает отлично. Но если эту страницу перезагрузить то сам компонент singlrPage отрисовывается но в шапке и в подвале сайта пропадают изображения и фоны.

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;

Возможно мне надо переместить дочерний роут внутрь компонента родительского роута? Как правильно делать? Если делать так то придется дочерний роут дублировать в каждом родительском.

И еще, у меня админка на laravel. Может в этом проблема?
Вот файл

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', '.*');

Спасибо?

Comments

[Alex Wells]

function($path = null){return View::make('home'); }

Интересно нахрена там $path тогда

[Дмитрий]

Alex Wells, потому что изначально была проблема при перезагрузке внутренних страниц и она решилась так stackoverflow.com. Теперь 404 не дает но при этом не подгружает некоторые папки с ресурсами. Поэтому изображения не рендерятся. В чем проблема пока не нашел.

[Антон Спирин]

Дмитрий, я не знаю PHP, но почему-то уверен, что весь представленный код можно заменить на:

Route::get( '/{path?}', function(){
    return view('home');
} )->where('path', '.*');

Answer 1

[Антон Спирин]

Ссылки по id.

Лучше использовать slug.

Создал rout положил его возле основного rout-а.

Во-первых не rout, а route. Во-вторых не ясно что и где вы создали. Видимо, речь идет о /shop и /shop/:productId?

Но если эту страницу перезагрузить то сам компонент singlrPage отрисовывается но в шапке и в подвале сайта пропадают изображения и фоны.

Вангую проблемы с ссылками на статику. Они у вас скорее всего строятся относительно пути в строке браузера. Просто откройте вкладку network и проверьте. Это, кстати, именно то, что вы должны были сделать в первую очередь.

Возможно мне надо переместить дочерний роут внутрь компонента родительского роута?

Нет. В этом нет никакого смысла. Советую заглянуть в исходные коды компонентов Router, Switch и Route чтобы понимать как это работает.

Comments

[Дмитрий]

Вангую проблемы с ссылками на статику. Они у вас скорее всего строятся относительно пути в строке браузера. Просто откройте вкладку и проверьте. Это именно то, что вы должны были сделать в первую очередь.

Объясните подробней, пожалуйста

[Антон Спирин]

Дмитрий, вкладку network. Поправил. Там будут ошибки загрузки ресурсов. Посмотрите URL по которому браузер их пытается загрузить.

[Антон Спирин]

Дмитрий, и покажите как вы добавляете изображения в коде.

[Дмитрий]

Антон Спирин, ошибок нет
изображение подгружаю так

<div className="headerMiddle__logoLink">
                    <img src="uploads/2018/07/header_logo.png" alt="logo"
                         className="headerMiddle__img" />
                </div>

[Антон Спирин]

Дмитрий, вы самостоятельно webpack настраивали или используете create-react-app? Если первое, то настраивайте file-loader. В обоих случаях используйте для изображений import или require.

На всякий документация CRA

[Дмитрий]

Антон Спирин, разобрался в чем проблема. Все из-за относительного пути вместо

<img src="uploads/2018/07/header_logo.png" alt="logo" className="headerMiddle__img" />

надо

<img src="/uploads/2018/07/header_logo.png" alt="logo" className="headerMiddle__img" />