[英]React dynamic routes and refresh
I am new to react routes and I am writing simple blog collection.我是反应路线的新手,我正在写简单的博客集。 I have provided router in index.js我在 index.js 中提供了路由器
ReactDOM.render(
<Provider store={store}>
<Router>
<App />
</Router>
</Provider>,
document.getElementById('root')
)
I have routes in my app.js我的 app.js 中有路由
return (
<div style={{marginLeft:'20px'}}>
<Route path='/'>
{loggedUser ? <Bar/> : null}
{loggedUser ? <h2>Blogs</h2> : null}
{loggedUser ? <Redirect to='/blogs'/> : <Redirect to='/login'/>}
</Route>
<Route path='/login'><LoginForm/></Route>
<Route exact path='/blogs'>
<BlogList/>
{visibility ? <BlogForm/> : null}
</Route>
<Route exact path='/users'><UserList/></Route>
<Route path='/users/:id'><SingleUser/></Route>
<Route path='/blogs/:id'><SingleBlog/></Route>
</div>
)
If user navigates to route with id like '/blogs/:id', it works fine.如果用户导航到 id 为 '/blogs/:id' 的路由,它工作正常。 But user can refresh browser and then id disappears from address bar and application drops back to '/blogs'.但是用户可以刷新浏览器,然后 id 从地址栏中消失,应用程序返回到“/blogs”。 How to prevent this behaviour?如何防止这种行为?
it's better to see first react-router-nesting it explained perfectly and on the other hand if you have many route create a array最好先看一下react-router-nesting它的完美解释,另一方面,如果您有很多路由,请创建一个数组
const Routes = [
{
component:BlogList,
path:'/blogs,
exact:true
},
{
component:UserList,
path:'/users,
exact:true,
routes:[
{
component:SingleUser,
path:'/:id'
}
]
{
component: Order,
path: '/',
exact: true,
routes: [
{
component: TabBar,
path: '/',
},
{
component: Menu,
path: '/',
exact: true,
},
{
component: InnerRoute,
path: '/:name',
routes: [
{
path: '/',
component: Menu,
exact: true,
},
{
path: '/info',
component: InfoRest,
},
{
path: '/favorite',
component: Favorite,
},
],
},
],
},
];
and in the file you wana to use it write following code并在您想使用它的文件中编写以下代码
<Router history={browserHistory}>
<Switch>{renderRoutes(Routes)}</Switch>
</Router>
import renderRoutes from react-router-config for routes or map it and return each other从react-router-config导入 renderRoutes 路由或映射它并相互返回
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.