Why is routing not working correctly?

Question

React

Hello.
There is

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

it is imported

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;

The problem is that if I go from the root http://localhost:3000/
, then everything works. If you go from the main page to any internal page, it also works correctly. But if after going to the internal refresh the page gives a 404 error. I suspect it's due to nesting.

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

How can I fix this without changing the structure, or with a change?
Thank you.

Answer 1

1. No need to wrap Main in Route. Enough:

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

2. Check your server code. Most likely, he gives the page with the application only on the root path '/'. If so, then replace with '*'.