使用浏览器历史记录更改 url 响应路由,但没有任何反应 [英] react route using browserhistory changes url but nothing happens
本文介绍了使用浏览器历史记录更改 url 响应路由,但没有任何反应的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我正在尝试让 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}/>
</BrowserRouter>,document.getElementById('main-content'));
然后在我的 index.js 中我这样做:
this.props.history.push('/login')}>登录
这会将 url 更改为/login,但不会呈现登录文件.怎么了?
解决方案
当你切换到 /login
时,它似乎与 /
匹配:
尝试将 exact
属性添加到路由中,如下所示:
<路由精确路径="/" component={Index}/>
您还可以尝试更改匹配顺序:
<Route path="/" component={Index}/>
I'm trying to get a react router to work. This is my code:
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')
);
and then later in my index.js i do this:
<div className="navbar-nav" onClick={() => this.props.history.push('/login')}>
Log in
</div>
This makes the url change to /login but it doesn't render the login file. What is wrong?
解决方案
It seems like when you switch to /login
it matches to /
:
<Route path="/" component={Index} />
Try to add exact
prop to the route, like this:
<Route exact path="/" component={Index} />
What you can also try to do is to change the matching order:
<Route path="/login" component={Login} />
<Route path="/" component={Index} />
这篇关于使用浏览器历史记录更改 url 响应路由,但没有任何反应的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文