React route - Content disappears on page refresh

Question

I want to use a sidebar when following links using React Route but when I refresh the page the content disappears

Lesson.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>
    );
}

App.js

function App() {

const { value } = useDarkMode(false);

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

}

export default App;

index.js

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

serviceWorker.unregister();

I think the problem is understandable, when the page is refreshed, the content disappears, in other pages everything works fine. I took this code from another project, but everything works fine there.

Answer 1

I think its conditional rendering problems. Its works as asynchronously

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