reactjs - 从 0.13 升级到 2.8.1 后 React-router 不工作

Question

我将我的 react-router 从版本 0.13 升级到 2.8.1，然后它给出了一个错误，指出“无法加载资源:服务器响应状态为 404(未找到)”。

这是我的代码。

import React from 'react'
import Router from 'react-router'

import App from './components/app';
import Main from './components/main';
import CreateOrganization from './components/create-organization';
import ManageUsers from './components/manage-users';
import FldList from './components/fld-list';
import FldView from './components/fld-view';
import WeighIn from './components/weigh-in';
import MatchFlds from './components/match-flds';
import NotFound from './components/not-found';

var { Route, DefaultRoute, NotFoundRoute } = Router;

var routes = (
    <Route handler={App}>
        <DefaultRoute handler={Main} />
        <Route name="CreateOrganization" path="create-organization" handler={CreateOrganization}></Route>
        <Route name="manageUsers" path="manage-users" handler={ManageUsers}></Route>
        <Route name="fldList" path="fld-list" handler={FldList}></Route>
        <Route name="fldView" path="fld-view/:fldId" handler={FldView}></Route>
        <Route name="weighIn" path="weigh-in" handler={WeighIn}></Route>
        <Route name="matchFlds" path="match-flds" handler={MatchFlds}></Route>
        <NotFoundRoute handler={NotFound} />
    </Route>
);

Router.run(routes, function (Handler) {
    React.render(<Handler />, document.getElementById('react-container'));
});

我应该怎么做才能解决这个错误？

Answer 1

此答案已在 React Router ver 2.7.0 上测试

React Router 的第 2 版引入了 IndexRoute、browserHistory 的概念。

关于如何配置路由的粗略概述如下。请查看官方文档以根据您的用例进行调整。

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

var routes = (
    <Router history={browserHistory}>
      <Route path="/" component={App} />
        <IndexRoute component={Main} />
        <Route path="create-organization" component={CreateOrganization} />
        <Route path="manage-users" component={ManageUsers} />
        <Route path="fld-list" component={FldList} />
        <Route path="fld-view/:fldId" component={FldView} />
        <Route path="weigh-in" component={WeighIn} />
        <Route path="match-flds" component={MatchFlds} />
        <Route path="*" component={NotFound} />
      </Route>
    </Router>
);

React.render(
  routes,
  document.getElementById('react-container')
);

// Also, in newer versions of React you can use ReactDOM for mounting your app.
// import ReactDOM from 'react-dom'
//ReactDOM.render(
//  routes,
//  document.getElementById('react-container')
//);