React Router导航不会更改页面/组件

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时 ，仍然显示App组件。 我知道我的路由确实可以识别作者的路径，因为如果输入错误的路径（例如authors1），则会收到一条错误消息，指出该路径不存在。 我尝试同时使用browserHistory和hashHistory。

因此，假设我的路由能够识别作者的路径，为什么它不根据作者的组件来更改页面内容？

谢谢

Answer 1

可能唯一的问题是您在作者（“ / authors”）之前忘了一个斜杠

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