ddimonn8080
@ddimonn8080

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

Здравствуйте, есть две страницы на которых есть вывод списка товаров с ссылками на эти товары. Ссылки по 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', '.*');


Спасибо?
  • Вопрос задан
  • 547 просмотров
Решения вопроса 1
rockon404
@rockon404 Куратор тега React
Frontend Developer
Ссылки по id.

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

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

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

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

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

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

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

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы