从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

API发生了某些变化，并且某些组件已被替换或被弃用。请看看API here并阅读upgrade guide here。

，如果你做如下修改您的路线应该工作：

<Route path="/" component={App}> 
    <IndexRoute component={Main} /> 
    <Route name="CreateOrganization" path="create-organization" component={CreateOrganization}></Route> 
    <Route name="manageUsers" path="manage-users" component={ManageUsers}></Route> 
    <Route name="fldList" path="fld-list" component={FldList}></Route> 
    <Route name="fldView" path="fld-view/:fldId" component={FldView}></Route> 
    <Route name="weighIn" path="weigh-in" component={WeighIn}></Route> 
    <Route name="matchFlds" path="match-flds" component={MatchFlds}></Route> 
    <Route path="**" component={NotFound} /> 
</Route> 

您还需要替换此：

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

有：

import createBrowserHistory from 'history/lib/createBrowserHistory' 
let history = createBrowserHistory() 
render(<Router history={history}>{routes}</Router>, el) 

---

这里有一个不是全部）的简要清单电子：

• 的handler属性现在被称为component
• 的<DefaultRoute>组件现在被称为<IndexRoute>
• 的<NotFoundRoute>组件现在已经过时。使用“全部”模式。 *或**（非贪婪vs贪婪 - 阅读文档）。

Answer 2

这个答案已经上反应路由器进行了测试版本2.7.0

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