我想在使用 React Route 跟踪链接时使用侧边栏，但是当我刷新页面时，内容消失了

课程.jsx

import React from "react";
import {
    BrowserRouter as Router,
    Switch,
    Route,
    Link
} from "react-router-dom";
import Home from "./components/Example";
import './css/activeLink.css'

const routes = [
    {
        path: "/",
        exact: true,
        sidebar: () => null,
        main: () => <h2>Home1</h2>
    },
    {
        path: "/bubblegum",
        sidebar: () => null,
        main: () => <Home />,
    },
    {
        path: "/shoelaces",
        sidebar: () => null,
        main: () => <h2>Shoelaces</h2>
    }
];

export default function Lesson() {
    return (
        <Router>
            <div style={{ display: "flex" }}>
                <div className={"sidebar"}>
                    <ul style={{ listStyleType: "none", padding: 0 }}>
                        <li>
                            <Link to="/home">Home</Link>
                        </li>
                        <li>
                            <Link to="/bubblegum">Bubblegum</Link>
                        </li>
                        <li>
                            <Link to="/shoelaces">Shoelaces</Link>
                        </li>
                    </ul>

                    <Switch>
                        {routes.map((route, index) => (
                            <Route
                                key={index}
                                path={route.path}
                                exact={route.exact}
                                children={<route.sidebar />}
                            />
                        ))}
                    </Switch>
                </div>

                <div className={"sidebar_content"}>
                    <Switch>
                        {routes.map((route, index) => (
                            // Render more <Route>s with the same paths as
                            // above, but different components this time.
                            <Route
                                key={index}
                                path={route.path}
                                exact={route.exact}
                                children={<route.main />}
                            />
                        ))}
                    </Switch>
                </div>
            </div>
        </Router>
    );
}

应用程序.js

功能应用（）{

const { value } = useDarkMode(false);

return (
    <ParallaxProvider>
            <Route path='/Lessons' render={() => <Lesson value={value}/>}/>
    </ParallaxProvider>
);

}

导出默认应用程序；

索引.js

ReactDOM.render(
    <BrowserRouter>
        <Provider store={store}>
            <React.StrictMode>
                <App />
            </React.StrictMode>
        </Provider>
    </BrowserRouter>,
    document.getElementById('root')
);

serviceWorker.unregister();

我认为这个问题是可以理解的，当页面刷新时，内容消失，在其他页面中一切正常。我从另一个项目中获取了这段代码，但那里一切正常。