Как сохранить состояние приложения по указанному адресу?

Question

[kiberlain]

Сделал примитивный starterkit с навигацией, кликаешь по ссылке и контент в layout обновляется. Но вот проблема - при перезагрузке страницы not found в браузере. Вопрос: что делают в этом случае?

код

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

Comments

[Алексей Абрамов]

Заменить component={Home} на element={<Home/>} и дальше по аналогии

[kiberlain]

Алексей Абрамов, обвернул, всё по прежнему

[Алексей Абрамов]

kiberlain, этот код на скриншоте обернут в BrowserRouter?

[kiberlain]

Алексей Абрамов, совершенно верно



и роутер работает, и история работает но вот после F5 всё ломается

[Алексей Абрамов]

kiberlain, значит проблема с сервером, так как при перезагрузке страницы запрос на "изначальное состояние приложения", чтобы потом от него плясать по роутам, не происходит.

Answer 1

[kiberlain]

чтобы состояние приложения не сбрасывалось при перезагрузке нужно было в конфиге вебпака прописать

devServer: {
        historyApiFallback: true
    }