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

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

Answer 1

这里的问题是 component={AssembliesRoute} 部分。基本上，您是在告诉 React 路由器，它应该作为程序集路由的基础呈现的组件是一个路由列表，出于显而易见的原因，它是行不通的。我认为你可以做的是制作 AssembliesRoute 一个 React 组件，returns 一个路由列表，然后将其嵌入到 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>

Answer 2

React Router 的问题是您不能将包装路由的组件传递给它。

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

你可以做的是传递一个 returns 原始路由组件的函数，如下所示：

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

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

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

瞧，您可以将路线导入主路线页面。

Answer 3

是的，您可以创建自定义路由组件。这有点 hacky 因为 react-router v3 是 hacky，但它是可能的。这是一个例子：

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> 组件。

React-router 导入路由

React-router import routes

reactjs

react-router