React-router导入路由

Question

我想改变这个:

  <Router history={browserHistory}>
    <Route path='/' component={Layout}>
      <Route path='signup' component={SignupPage} />
      <Route path='assemblies/' component={AssemblyPages}>
        <Route path='categories/' component={Categories}>
      </Route>
    </Route>
  </Router>

至

import AssembliesRoute from './AssembliesRoute';

   <Router history={browserHistory}>
    <Route path='/' component={Layout}>
      <Route path='signup' component={SignupPage} />
      <AssembliesRoute />
    </Route>
  </Router>

//AssembliesRoute.js

export default class extends compondent {
render(){
  return <Route path='assemblies/' component={AssemblyPages}>
            <Route path='categories/' component={Categories}>
         </Route>
}
}

基本上,我想将所有嵌套在程序集路由中的路由,并在程序集文件夹中的特定文件中处理它们,然后将这些路由返回到路由器.但是当我尝试这样做时,我找不到路线.这可能吗？

Answer 1

React Router的问题在于你不能传递一个包装路由的组件.

因此,如果您创建一个名为AssemblyRoutes的Component来包装所有程序集,那么它将无法工作.

您可以做的是传递一个返回原始Route Components的函数,如下所示:

//AssemblyRoutes
    export default function(){
     return <Route ... >
    }

然后调用路由中的函数

import assemblyRoutes from 'AssemblyRoutes
<Router>
 <Route>
  {assemblyRoutes()}
 </Route>
</Router>

瞧,您可以将路线导入主要路线页面.