使用react router,我可以使用Link元素来创建由react route本地处理的链接。
我看到它在内部调用this.context.transitionTo(…)。
我想做导航。不是来自链接,而是来自下拉选择(例如)。我如何在代码中执行此操作?this.context是什么?
我看到了导航混合,但我可以在没有混合的情况下这样做吗?
使用react router,我可以使用Link元素来创建由react route本地处理的链接。
我看到它在内部调用this.context.transitionTo(…)。
我想做导航。不是来自链接,而是来自下拉选择(例如)。我如何在代码中执行此操作?this.context是什么?
我看到了导航混合,但我可以在没有混合的情况下这样做吗?
当前回答
在react router的上下文中,已经有大量的答案可以正确、准确地回答这个问题,但我想花点时间指出一些我在其他答案中没有提到的问题。
这是一种stackoverflow的比喻,建议用与原始问题不同的方式来做一些事情,但在这种情况下,由于问题的年龄,我觉得在当前的时间里,问题的表述会有所不同。
我建议放弃react router,只需通过window.location.href=[yoururlhere]推送到本地浏览器位置,然后通过正则表达式(或确切的)匹配window.location.pathname和您的预期路径来检查路径。
更简单的答案通常是最好的答案,在这种情况下,React Router的用例由本地位置对象API提供更好的服务。
其他回答
在react router的上下文中,已经有大量的答案可以正确、准确地回答这个问题,但我想花点时间指出一些我在其他答案中没有提到的问题。
这是一种stackoverflow的比喻,建议用与原始问题不同的方式来做一些事情,但在这种情况下,由于问题的年龄,我觉得在当前的时间里,问题的表述会有所不同。
我建议放弃react router,只需通过window.location.href=[yoururlhere]推送到本地浏览器位置,然后通过正则表达式(或确切的)匹配window.location.pathname和您的预期路径来检查路径。
更简单的答案通常是最好的答案,在这种情况下,React Router的用例由本地位置对象API提供更好的服务。
您可以在React中尝试onClick事件,并使用React Router的useNavigate钩子调用函数重定向到指定位置。您可以直接在onClick处理程序中使用回调函数,而不是指定其他函数。首先需要安装react router DOM。
npm i react-router-dom
尝试以下代码
import { useNavigate } from "react-router-dom";
const Page = () => {
const navigate = useNavigate();
return (
<button onClick={() => navigate('/pagename')}>
Go To Page
</button>
);
}
对于ES6+React组件,以下解决方案适用于我。
我跟随费利佩·斯金纳,但添加了一个端到端解决方案,以帮助像我这样的初学者。
以下是我使用的版本:
“反应路由器”:“^2.7.0”“反应”:“^15.3.1”
下面是我的react组件,其中我使用react路由器进行编程导航:
import React from 'react';
class loginComp extends React.Component {
constructor( context) {
super(context);
this.state = {
uname: '',
pwd: ''
};
}
redirectToMainPage(){
this.context.router.replace('/home');
}
render(){
return <div>
// skipping html code
<button onClick={this.redirectToMainPage.bind(this)}>Redirect</button>
</div>;
}
};
loginComp.contextTypes = {
router: React.PropTypes.object.isRequired
}
module.exports = loginComp;
以下是路由器的配置:
import { Router, Route, IndexRedirect, browserHistory } from 'react-router'
render(<Router history={browserHistory}>
<Route path='/' component={ParentComp}>
<IndexRedirect to = "/login"/>
<Route path='/login' component={LoginComp}/>
<Route path='/home' component={HomeComp}/>
<Route path='/repair' component={RepairJobComp} />
<Route path='/service' component={ServiceJobComp} />
</Route>
</Router>, document.getElementById('root'));
这对我有效,不需要特殊进口:
<input
type="button"
name="back"
id="back"
class="btn btn-primary"
value="Back"
onClick={() => { this.props.history.goBack() }}
/>
React Router 4.x答案
在我这一方面,我希望有一个单独的历史对象,我甚至可以携带外部组件。我喜欢按需导入一个history.js文件,并对其进行操作。
您只需将BrowserRouter更改为Router,并指定历史属性。这对你来说没有任何改变,除了你有自己的历史对象,你可以随心所欲地操纵它。
您需要安装历史记录,即react router使用的库。
示例用法,ES6表示法:
history.js
import createBrowserHistory from 'history/createBrowserHistory'
export default createBrowserHistory()
基本组件.js
import React, { Component } from 'react';
import history from './history';
class BasicComponent extends Component {
goToIndex(e){
e.preventDefault();
history.push('/');
}
render(){
return <a href="#" onClick={this.goToIndex}>Previous</a>;
}
}
如果您必须从实际从Route组件渲染的组件进行导航,还可以从props访问历史,如下所示:
基本组件.js
import React, { Component } from 'react';
class BasicComponent extends Component {
navigate(e){
e.preventDefault();
this.props.history.push('/url');
}
render(){
return <a href="#" onClick={this.navigate}>Previous</a>;
}
}