阵营路由器的进口途径

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路由器的问题是，您无法将它传递给包装路由的组件。

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

你可以做的是通过返回原线路零部件，像这样的功能：

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

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

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

瞧，你可以导入路线进入您的主要路线页面。

Answer 2

这里的问题是component={AssembliesRoute}部分。基本上，你告诉反应路由器，它应该呈现的组件的路由作为组件路径的基础是路由列表，由于显而易见的原因，路由列表是行不通的。我想认为你可以做的是让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> 

Answer 3

是的，你可以创建一个自定义的路由组件。这是一种黑客，因为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

阵营路由器V4将使它非常容易，因为<Route>假组件消失并留下真正的React <Match>组件。