从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')
//);