javascript - 如何在 react 路由器中将子路由定义为 react 组件？

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

对我来说，这样组成 Router 的方法似乎行不通，但我不明白什么是正确的方法。

Answer 1

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

这将使您可以轻松配置代码拆分和动态路由。