react-router 有没有类似vue-router的$router.options.routes属性

Question

就是拿到我所有定义的路由path

export default props => {
  return (
    <BrowserRouter basename="/admin" {...props}>
      <Switch>
        <Route exact path="/" component={Home}/>
        <Route path="/login" component={Login}/>
        <Route path="/register" component={Register}/>
        <Route path="/Forget" component={Forget}/>
        <Route component={NotFound}/>
      </Switch>
    </BrowserRouter>
  )
}

返回类似这种

[
  {path: '/'},
  {path: '/login'},
  {path: '/register'},
  {path: '/forget'}
]

Answer 1

你可以自己写个配置变量，放到单独文件作为模块。等到你需要获取所有path直接import这个配置文件就行了。

例如：

const routes = [
  { path: '/sandwiches',
    component: Sandwiches
  },
  { path: '/tacos',
    component: Tacos,
    routes: [
      { path: '/tacos/bus',
        component: Bus
      },
      { path: '/tacos/cart',
        component: Cart
      }
    ]
  }
]

然后map生成

{routes.map((route, i) => (
   <Route key={i} {...route} />
))}

来源于官网