Question

我有main.js：

import { render } from 'react-dom';
import { browserHistory, Router, Route, IndexRoute } from 'react-router';

import Home from './containers/Home';
import ApplicationsRoutes from './applications/routes';

render((
  <Router history={browserHistory}>
    <Route path="/" component="div">
      <IndexRoute component={Home} />      
      <ApplicationsRoutes />
    </Route>
  </Router>
), document.getElementById('app'));

/application/routes.js：

import { browserHistory, Router, Route, IndexRoute } from 'react-router'

import ApplicationsHome from './containers/ApplicationsHome';

export default () => (
  <Route path="applications" component={ApplicationsHome} />
);

我原以为来自/application/routes.js的路由会被添加到主路由器中，因此ApplicationsHome将呈现为路径/applications

不幸的是，这不是一个案例。我收到了错误：

Location "/applications" did not match any routes

对我而言，看起来这样一种组合路由器的方式不起作用，但我无法理解这是怎样的正确方法。

Answer 1

一般来说，当你这样做时，你应该考虑使用PlainRoute语法而不是JSX语法，然后在父路由上使用getChildRoutes来解析子路由，按照巨大的应用程序例如：https://github.com/rackt/react-router/tree/master/examples/huge-apps

这样您就可以轻松配置代码分割和动态路由。

Answer 2

对于单一路线，您可以将路线导出为JSX元素：

export default <Route path="applications" component={ApplicationsHome} />;

并将其包括在内：

{SomeRoute}

对于多个路径，你不能像在函数中一样导出它们，你会得到一个JSX错误，说你不能有没有包装元素的相邻组件。在这种情况下，您必须这样做：

export default (
  <Route>
    <Route path="/about" component={About} />
    <Route path="/services" component={Services} />
  </Route>
);

并使用它：

{ApplicationsRoutes}

如何将子路由定义为react-router中的反应组件？

2 个答案: