Почему роутинг не работает правильно?

Question

[Дмитрий]

Здравствуйте.
Есть

index.jsx

import React from 'react';
import ReactDOM from 'react-dom';
import Main from './Main';
import { BrowserRouter as Router, Route } from 'react-router-dom';

import { Provider } from 'react-redux';
import store from './store';

ReactDOM.render((
    <Provider store={store}>
        <Router>
            <Route path="/" component={Main} />
        </Router>
    </Provider>
), document.getElementById('root'));

в него импортируется

Main.jsx

import React, {Component} from 'react';
//import { connect } from 'react-redux';

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';

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="/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;

Проблема в том что если я захожу из корня http://localhost:3000/
то все работает. Если с главной перейти на любую внутреннюю страницу, то тоже работает корректно. Но если после перехода на внутреннюю обновить страницу дает 404 ошибку. Подозреваю что это из-за вложенности

<Router>
            <Route path="/" component={Main} />
        </Router>

как можно исправить это не меняя структуру, либо с изменением?

Спасибо.

Answer 1

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

1. Нет необходимости оборачивать Main в Route. Достаточно:

ReactDOM.render((
  <Provider store={store}>
    <Router>
      <Main />
    </Router>
  </Provider>
), document.getElementById('root'));

2. Проверьте код своего сервера. Скорей всего он отдает страницу с приложением только по корневому пути '/'. Если это так, то замените на '*'.

Answer 2

[Дмитрий]

Решение такое:
Бекенд на Laravel. В файле web.php к этому

Route::get('/', function () {
    return view('home');
});

добавил

Route::get('/{path?}', function($path = null){
    return View::make('home'); 
})->where('path', '.*');