リアクタのナビゲーションでページ/コンポーネントが変更されない

Question

最新バージョンのリアクションルータ（^ 3.0.0）を使用しています。

私は簡単なナビゲーションを作成しようとしていますが、URLパスに関連して表示されるコンポーネントを変更するのに問題があります。

これは私の単純なルーティングコードです：

ReactDom.render(
    <Router history={browserHistory}> 
     {routes}   
    </Router>, 
    document.getElementById('app') 
); 

と、これは私のルート変数です：

var routes = (
    <Route path="/" component={App}> 
     <IndexRoute component={Home} /> 
     <Route path="authors" component={AuthorPage} /> 
    </Route> 

); 

私はhttp://localhost:9005/#/authorsに移動すると、私はまだ表示されたアプリケーションコンポーネントを取得します。間違ったパス（authors1）を入力すると、パスが存在しないというエラーが表示されるので、私のルーティングが著者のパスを認識することが分かります。私はbrowserHistoryとhashHistoryの両方を使ってみました。

私のルーティングが著者のパスを認識すると仮定すると、なぜ著者のコンポーネントに従ってページのコンテンツが変更されないのですか？

ありがとうございました

Answer 1

が唯一の問題である可能性がありますが、著者の前にスラッシュを忘れてしまったということである：マッチはあなたがにルーティングしたいとルーティング404のがあればミスは目的地を設定し、正確なコンポーネントのルールを設定することができます

ReactDom.render(
    <Router history={browserHistory}> 
     <Route path="/" component={App}> 
      <IndexRoute component={Home} /> 
      <Route path="/authors" component={AuthorPage} /> 
     </Route>  
    </Router>, 
    document.getElementById('app') 
); 

希望します。

Answer 2

反応ルータのMatchメソッドとMissメソッドを使用してください。 （「/著者」）

import React from 'react'; 
import {render} from 'react-dom'; 
import {BrowserRouter, Match, Miss} from 'react-router'; 
import NotFound from './components/NotFound'; 

const Root =() => { 
    return(
     <BrowserRouter> 
      <div> 
       <Match exactly pattern="/" component={App} /> 
       <Match exactly pattern="/authors" component={AuthorPage}/> 
       <Miss component={NotFound} /> 
      </div> 
     </BrowserRouter> 
    ) 
} 

render(<Root/>, document.querySelector('#main'));