javascript - 使用 browserhistory 更改 url 的 react 路线但没有任何反应

Question

我正在尝试让 React 路由器工作。这是我的代码:

var hashHistory = require('react-router-dom').hashHistory;
var BrowserRouter = require('react-router-dom').BrowserRouter;
var Route = require('react-router-dom').Route;
var ReactDOM = require('react-dom');
var React = require('react');
var Index = require('./index');
var Login = require('./login');

ReactDOM.render(
    <BrowserRouter history={hashHistory}>
        <div>
            <Route path="/" component={Index} />
            <Route path="/login" component={Login} />
         </div>
    </BrowserRouter>,
    document.getElementById('main-content')
);

然后在我的 index.js 中我这样做:

 <div className="navbar-nav" onClick={() => this.props.history.push('/login')}>
                    Log in
                </div>

这会使 url 更改为/login 但不会呈现登录文件。怎么了？

Answer 1

当您切换到 /login 时，它似乎与 / 匹配:

<Route path="/" component={Index} />

尝试向路由添加 exact 属性，如下所示:

<Route exact path="/" component={Index} />

您还可以尝试更改匹配顺序:

<Route path="/login" component={Login} />
<Route path="/" component={Index} />