React-router 导入路由

Question

I would like to change this:

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

To

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

基本上，我想将嵌套在assemblies路由内的所有路由，在assemblies文件夹中的特定文件中处理，并将这些路由返回给路由器。但是当我尝试这样做时，却找不到路由。这种情况可能吗？

- DrivingInsanee

---

可能是重复的问题，链接为 https://dev59.com/75Lea4cB1Zd3GeqP1FvY#34439180 - François Zaninotto

Answer 1

React Router 的问题在于您无法向其传递包装 Route 的组件。

因此，如果您创建了一个名为 AssemblyRoutes 的组件来包装所有汇编，它将无法工作。

您可以执行的操作是传递一个返回原始 Route 组件的函数，示例如下：

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

然后在你的路由中调用该函数

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

大功告成，你可以将路由导入到主路由页面。

- DrivingInsanee

---

你能分享一个解释为什么路由不能包装在另一个组件中的参考资料吗？ - XML

我在文档中没有找到任何东西。这个问题令人困惑的地方就在于此。这个解决方案对我有效，所以我使用它。 - DrivingInsanee

Answer 2

这里的问题在于 component={AssembliesRoute} 部分。基本上，你告诉 React Router 它应该将哪个组件作为装配路由的基础进行渲染，而这个组件是一个路由列表，因为明显的原因，这样是行不通的。我认为你可以将 AssembliesRoute 做成一个返回路由列表的 React 组件，然后将其嵌入到 Router 层次结构中。像这样：

// AssembliesRoutes.js
class AssembliesRoutes extends React.Component {
  render() {
    return (
      <Route path='assemblies/' component={AssemblyPages}>
        <Route path='categories/' component={AssemblyCategoriesPages}>
          <Route path='create' component={AssemblyCategoriesCreatePage} />
          <Route path='index' component={AssemblyCategoriesIndexPage} />
        </Route>
        <Route path='create' component={AssemblyCreatePage} />
        <Route path='index/:categoryId' component={AssemblyIndexPage} />
      </Route>
    )
  }
}

// In your Router file
import AssembliesRoutes from './AssembliesRoutes';

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

- taylorc93

---

嗨，泰勒，我完全搞砸了这个问题。你所做的就是我基本上所做的。你能检查我的编辑并确认一下吗？ - DrivingInsanee

我非常确定这不会起作用。你需要一个函数直接返回一个Route组件，而不是包装你的路由组件的组件。 - Bret

Answer 3

是的，您可以创建自定义的路由组件。这有点魔改因为react-router v3就是这样的，但是它是可行的。以下是一个示例：

import React from 'react';
import { IndexRoute, Route } from 'react-router';
import { createRoutesFromReactChildren } from 'react-router/lib//RouteUtils';

const CrudRoute = () => <div>&lt;CrudRoute&gt; elements are for configuration only and should not be rendered</div>;

CrudRoute.createRouteFromReactElement = (element, parentRoute) => {
    const { path, list, edit, create, remove } = element.props;
    // dynamically add crud routes
    const crudRoute = createRoutesFromReactChildren(
        <Route path={path}>
            <IndexRoute component={list} />
            <Route path="create" component={create} />
            <Route path=":id" component={edit} />
            <Route path=":id/remove" component={remove} />
        </Route>,
        parentRoute
    )[0];
    // higher-order component to pass path as resource to components
    crudRoute.component = ({ children }) => (
        <div>
            {React.Children.map(children, child => React.cloneElement(child, { path }))}
        </div>
    );
    return crudRoute;
};

export default CrudRoute;

按照以下方式使用此自定义路由：

import CrudRoute from './CrudRoute';
<Router history={history}>
    <CrudRoute path="posts" list={PostList} create={PostCreate} edit={PostEdit} remove={PostRemove} />
    <CrudRoute path="comments" list={CommentList} create={CommentCreate} edit={CommentEdit} remove={CommentRemove} />

</Router>

关于这种技术的更多细节请参见：http://marmelab.com/blog/2016/09/20/custom-react-router-component.html

React-router v4将变得非常容易，因为<Route>伪组件消失了，留下了真正的React <Match>组件。

- François Zaninotto

---

我意识到这个问题是 https://dev59.com/75Lea4cB1Zd3GeqP1FvY#34439180 的重复，而那个问题比较旧。我将在那里复制我的答案。 - François Zaninotto