反应路线 - 页面刷新时内容消失
[英] React route - Content disappears on page refresh
本文介绍了反应路线 - 页面刷新时内容消失的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我想在使用 React Route 跟踪链接时使用侧边栏，但是当我刷新页面时，内容消失了
课程.jsx
从反应"导入反应；进口 {BrowserRouter 作为路由器，转变，路线，关联} 来自反应路由器-dom"；从./components/Example"导入主页；导入'./css/activeLink.css'const 路由 = [{路径:/"，准确:真实，侧边栏:() =>空值，主要: () =><h2>家1</h2>},{路径:/泡泡糖"，侧边栏:() =>空值，主要: () =><主页/>,},{路径:/鞋带"，侧边栏:() =>空值，主要: () =><h2>鞋带</h2>}];导出默认函数 Lesson() {返回 (<路由器><div style={{ display: "flex";}}><div className={"sidebar"}><ul style={{ listStyleType: "none", padding: 0 }}><li><链接到=/home">首页</Link><li><链接到=/bubblegum">Bubblegum</Link><li><Link to="/shoelaces">Shoelaces</Link><开关>{routes.map((route, index) => (<路线键={索引}路径={route.path}精确={route.exact}儿童={<route.sidebar/>}/>))}</开关>
<div className={"sidebar_content"}><开关>{routes.map((route, index) => (//渲染更多具有相同路径的 <Route>s//上面，但这次是不同的组件.<路线键={索引}路径={route.path}精确={route.exact}儿童={<route.main/>}/>))}</开关>
</路由器>);}
App.js
函数应用(){
const { value } = useDarkMode(false);返回 (<ParallaxProvider><Route path='/Lessons' render={() =><课程价值={价值}/>}/></ParallaxProvider>);
}
导出默认应用；
index.js
ReactDOM.render(<浏览器路由器><提供者商店={商店}><React.StrictMode><应用程序/></React.StrictMode></提供者></BrowserRouter>,document.getElementById('root'));serviceWorker.unregister();
我认为这个问题是可以理解的，当页面刷新时，内容消失，在其他页面中一切正常.我从另一个项目中获取了这段代码，但那里一切正常.
解决方案
我认为它的条件渲染问题.它是异步工作的
从反应"导入反应；进口 {BrowserRouter 作为路由器，转变，路线，关联} 来自反应路由器-dom"；从./components/Example"导入主页；导入'./css/activeLink.css'const 路由 = [{路径:/"，准确:真实，侧边栏:() =>空值，主要: () =><h2>家1</h2>},{路径:/泡泡糖"，侧边栏:() =>空值，主要: () =><主页/>,},{路径:/鞋带"，侧边栏:() =>空值，主要: () =><h2>鞋带</h2>}];导出默认函数 Lesson() {返回 (<路由器><div style={{ display: "flex";}}><div className={"sidebar"}><ul style={{ listStyleType: "none", padding: 0 }}><li><链接到=/home">首页</Link><li><链接到=/bubblegum">Bubblegum</Link><li><Link to="/shoelaces">Shoelaces</Link><开关>{routes?.map((route, index) => (<路线键={索引}路径={route.path}精确={route.exact}儿童={<route.sidebar/>}/>))}</开关>
<div className={"sidebar_content"}><开关>{routes?.map((route, index) => (//渲染更多具有相同路径的 <Route>s//上面，但这次是不同的组件.<路线键={索引}路径={route.path}精确={route.exact}儿童={<route.main/>}/>))}</开关>
</路由器>);}
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.
解决方案
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>
);
}
这篇关于反应路线 - 页面刷新时内容消失的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
