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

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

Answer 1

React Router的问题在于你不能传递一个包裹路径的组件。

因此，如果您创建一个名为AssemblyRoutes的Component来包装所有程序集，那么它将无效。

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

NO WAIT

然后调用路线中的功能

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

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

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

是的，您可以创建自定义路径组件。这是一种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导入路由

3 个答案: