How to store application state at specified address?

Question

React

I made a primitive starterkit with navigation, you click on the link and the content in the layout is updated. But here's the problem - when reloading the page not found in the browser. Question: what is done in this case?

the code

// index.js

import React from 'react'
import ReactDOM from 'react-dom'

import App from "./App";

function render() {
    ReactDOM.render(<App />, document.querySelector('#root'));
}

render()
/////////////////////
// App.js

import React from 'react'
import Pages from "./pages"

function App() {
    return (
        <div>
            <Pages />
        </div>
    )
}
export default App

// pages/index.js

import React from 'react'
import {BrowserRouter as Router, Route, Routes} from 'react-router-dom'
import Layout from '../layouts/MainLayout'
////////////////////
// pages/Pages
import Home from "./Home";
import Favorites from "./Favorites";

const Pages = () => {
    return(
        <Router>
            <Layout>
                <Routes>
                    <Route exact path="/" component={Home} />
                    <Route path="/favorites" component={Favorites}/>
                </Routes>
            </Layout>
        </Router>
    )
}

export default Pages

///////////////////
// layouts/MainLayout.js

import React from 'react';
import Header from '../components/Header';
import Navigation from '../components/Navigation';
const Layout = ({ children }) => {
    return (
        <>
            <Header />
            <Navigation />
            <main>{children}</main>
        </>
    );
};
export default Layout;

Answer 1

so that the application state is not reset upon reboot, it was necessary to register in the webpack config

devServer: {
        historyApiFallback: true
    }