経路が一致していません

Question

CompanyDetailContainerの経路と一致しない理由がわかりません。私が使用している

：

"react-router": "^3.0.0", 
"react-router-dom": "^4.2.2", 

をインタビューコンテナのルートは

 <IndexRoute component={HomePageContainer} /> 
     <Route component={InterviewContainer} name="interview" path="interviews/companies/:companyId" /> 
     <Route component={CompanyDetailContainer} name="companydetail" path="interviews/companies/:companyId/details" /> 

正常に動作しますので、http://localhost:8080/interviews/companies/10はinterviewルート罰金に当たるが、companydetailルート

UPDATEをhttp://localhost:8080/interviews/companies/501/detailsヒットしません。

オリジナルコード：

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

    <Router history={browserHistory} onUpdate={onUpdate}> 
    <Route path="/"> 
     <IndexRoute component={HomePageContainer} /> 
     <Switch> 
     <Route exact component={InterviewContainer} name="interview" path="interviews/companies/:companyId" /> 
     <Route exact component={CompanyDetailContainer} name="companydetail" path="interviews/companies/:companyId/details" /> 
     </Switch> 
     <Route component={About} name="about" path="about" /> 
     <Route component={JobList} name="jobs" path="jobs" /> 
    </Route> 
    <Route component={Container} path="/" /> 
    <Route component={NotFound} path="*" /> 
    </Router> 

私は動作しませんでしたしていたものにだけ正確な追加：

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


    <Router history={browserHistory} onUpdate={onUpdate}> 
     <Route path="/" component={HomePageContainer}> 
     <Route component={InterviewContainer} exact name="interview" path="interviews/companies/:companyId" /> 
     <Route component={CompanyDetailContainer} exact name="companydetail" path="interviews/companies/:companyId/details" /> 
     <Route component={About} name="about" path="about" /> 
     <Route component={JobList} name="jobs" path="jobs" /> 
     <Route component={Container} path="/" /> 
     <Route component={NotFound} path="*" /> 
     </Route> 

    </Router> 

その後、私はその周りにスイッチを追加しようとしました：

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

    <Router history={browserHistory} onUpdate={onUpdate}> 
    <Switch> 
     <Route path="/" component={HomePageContainer}> 
     <Route component={InterviewContainer} exact name="interview" path="interviews/companies/:companyId" /> 
     <Route component={CompanyDetailContainer} exact name="companydetail" path="interviews/companies/:companyId/details" /> 
     <Route component={About} name="about" path="about" /> 
     <Route component={JobList} name="jobs" path="jobs" /> 
     <Route component={Container} path="/" /> 
     <Route component={NotFound} path="*" /> 
     </Route> 
    </Switch> 
    </Router> 

そして今、私はこのエラーを取得する：Cannot read property 'createRouteFromReactElement' of undefined 。 Switchのインポートが解決しないことに気付きましたが、それはSwitchのインポート方法です。

これらのルートがすべてサブルート<Route path="/" component={HomePageContainer}>である必要があるかどうかもわかりませんか？提案ごとに<IndexRoute />も削除しました。

Answer 1

リアクタールータV4は2つのパッケージに分割されています。 1つはWeb（DOM）用、もう1つはNative用です。

したがって、あなたは、反応し、ルータ依存性を必要としないだけで反応-ルータ-DOMを。

だからではなく、反応-ルータ-DOMからコンポーネントをインポートする：1つのルートのみが一致するように、あなたはその後、スイッチであなたのルートをラップすることができ

import { BrowserRouter, Route, Switch } from 'react-router-dom' 

。あなたが他の上ご詳細にルートを置く場合

それが最初に一致する必要があります：

<BrowserRouter> 
    <Switch> 
    <Route exact path="/" component={HomePageContainer} /> 
    <Route path="/interviews/companies/:companyId/details" component={CompanyDetailContainer} /> 
    <Route path="/interviews/companies/:companyId" component={InterviewContainer} /> 
    <Route path="/about" component={About} /> 
    <Route path="/jobs" component={JobList} /> 
    <Route component={NotFound} /> 
    </Switch> 
</BrowserRouter> 

は、ルータV4に反応して、あなたが巣のルートはないことに注意してください。代わりに、コンポーネント内にルートを追加することができます。

Answer 2

は、スイッチ付きラッピングを持つ2つのルートを逆に

：

import {Switch} from 'react-router'; 

<IndexRoute component={HomePageContainer} /> 
<Switch> 
    <Route component={CompanyDetailContainer} name="companydetail" path="interviews/companies/:companyId/details" /> 
    <Route component={InterviewContainer} name="interview" path="interviews/companies/:companyId" /> 
</Switch> 

Answer 3

2つの可能な解決策があります

1. はに使用されているSwitch、独占的を使用することは、ただ一つの経路を描画します。

2. Routeコンポーネントのexactプロップを使用します。このコンポーネントは、パスが完全一致の場合にのみコンポーネントをレンダリングします。

例：

<Switch> 
    <Route exact component={InterviewContainer} name="interview" path="interviews/companies/:companyId" /> 
    <Route exact component={CompanyDetailContainer} name="companydetail" path="interviews/companies/:companyId/details" /> 
</Switch> 

P.S.Switchを使用する場合は、IndexedRouteは必要ありません（使用しているバージョンのドキュメントで確認することをお勧めします）。