React路由器導航不會更改頁面/組件

Question

我正在使用react-router（^ 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

可能是唯一的問題是，你之前的作者忘了斜槓（「/作者」）

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

希望有幫助。

Answer 2

使用來自react-router的Match和Miss方法。比賽允許您設置的確切成分的規則，你想的路線和小姐設置目的地，如果路由404的：

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