反应动态路由和刷新

Question

我是反应路线的新手，我正在写简单的博客集。 我在 index.js 中提供了路由器

ReactDOM.render(
  <Provider store={store}>
    <Router>
      <App />
    </Router>
  </Provider>,
  document.getElementById('root')
)

我的 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>
  )

如果用户导航到 id 为 '/blogs/:id' 的路由，它工作正常。 但是用户可以刷新浏览器，然后 id 从地址栏中消失，应用程序返回到“/blogs”。 如何防止这种行为？

Answer 1

最好先看一下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,
          },
        ],
      },
    ],
  },
];

并在您想使用它的文件中编写以下代码

      <Router history={browserHistory}>
        <Switch>{renderRoutes(Routes)}</Switch>
      </Router>

从react-router-config导入 renderRoutes 路由或映射它并相互返回