反应路线 - 内容在页面刷新时消失

Question

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

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

函数应用程序() {

const { value } = useDarkMode(false);

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

}

导出默认应用；

index.js

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

serviceWorker.unregister();

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

Answer 1

我认为它的条件渲染问题。它的工作方式是异步的

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

反应路线 - 内容在页面刷新时消失

React route - Content disappears on page refresh

javascript

refresh

page-refresh

reactjs

react-router