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从地址栏中消失，应用程序又回到“ /博客”。如何防止这种行为？

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 路线或将其映射并相互返回

反应动态路线并刷新

1 个答案: