React-router 导入路由 [英] React-router import routes

问题描述

我想改变这个:

  <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>
}
}

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

Basically, I want to take all of the routes nested inside the assemblies route, and deal with them in a specific file in the assemblies folder, and then return those routes to the Router. But when I try to do this, I get no route found. Is this possible?

推荐答案

React Router 的问题是你不能传递给它一个封装了 Route 的 Component.

The problem with React Router is that you cannot pass it a Component that wraps a Route.

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

So, if you create a Component called AssemblyRoutes that wraps all your assemblies, it won't work.

您可以做的是传递一个返回原始路由组件的函数，如下所示:

What you can do is pass a function that returns the raw Route Components like so:

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

然后调用路由中的函数

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

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

And voila, you can import routes into your main routes page.

这篇关于React-router 导入路由的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！