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