0.13から2.8.1へのアップグレード後にリアクタが動作しない

Question

リア・ルータをバージョン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) 

---

ここです変更の簡単なリスト（全部ではない）はしないE：handlerプロパティは今component

と呼ばれる

• <DefaultRoute>コンポーネントは、現在<NotFoundRoute>コンポーネントが廃止され<IndexRoute>
• と呼ばれています。 「キャッチオール」パターンを使用します。 *または**（欲張りではない、欲張り - ドキュメントを読む）。

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