react-router-dom 用高阶组件的时候碰到一些问题?

高阶组件
const PrivateRoute = ()=>{
   return <Route path='/'><Home/></Route>
}
使用
<Swith>
   <Route path='/'><Home/></Route>//第一种方式
   <PrivateRoute />//第二种方式
</Swith>

这两种方式在使用上有什么区别,主要是想在 PrivateRoute 写一些逻辑。
但是好像不行,匹配不上

其他路由的都可以 就是 '/' 不行 ,实在脑壳疼

阅读 2.2k
2 个回答

理论上Switch组件和Route组件必须是直接上下级关系,否则可能会读取不到路由。所以第二种方法显然是不对的。至于你说的“/”不行我不太理解是怎么个不行法,是有报错还是不能匹配到正确的路由组件

问题已经解决,第二种方法是可行的。
问题出现在 exact 这个参数上。子路由设置为false 父路由设置为true

    const routes = [
        { path: '/', component: <component/>, exact: true },
        { path: '/a', component: <component/>, exact: true },
        { path: '/b', component: <component/>, exact: true },
    ]
 <Switch>
     {
      routes.map((item: any, idx: number) =>
           <PrivateRoute
            exact={item.exact}
            path={item.path}
            content={item.component}
            key={idx}  )
       }
   </Switch>
     
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题