Question

我将react-path从版本0.13升级到2.8.1，然后它给出了一个错误，说＆＃34;无法加载资源：服务器响应状态为404（未找到）＆＃34;。

这是我的代码。

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

Answer 2

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>组件。使用＆＃34; catch-all＆＃34;图案。 *或**（非贪婪与贪婪 - 阅读文档）。

从0.13升级到2.8.1后，React-router不起作用

2 个答案: