我正在尝试让React Router正常工作.这是我的代码:
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,但不会呈现登录文件.怎么了?
解决方法:
似乎当您切换到/ login时,它匹配/:
<Route path="/" component={Index} />
尝试向路线添加确切的道具,如下所示:
<Route exact path="/" component={Index} />
您还可以尝试更改匹配顺序:
<Route path="/login" component={Login} />
<Route path="/" component={Index} />