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

可能唯一的问题是你在作者之前忘记了一个斜杠（＆＃34; / authors＆＃34;）

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是，则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'));

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

2 个答案: