反應動態路由和刷新

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 路由或映射它並相互返回