问题
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.
回答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>
);
}
来源:https://stackoverflow.com/questions/65761672/react-route-content-disappears-on-page-refresh