反应路由器: 如何手动调用链接？

我是 ReactJS 和 React- 路由器的新手。我有一个组件，通过道具从 反应路由器接收一个 <Link/>对象。每当用户点击组件中的“ next”按钮时，我都想手动调用 <Link/>对象。

现在，我正在使用 裁判访问 支持实例并手动单击 <Link/>生成的‘ a’标记。

问: 是否有手动调用 Link 的方法(例如 this.props.next.go) ？

这是我现在的代码:

//in MasterPage.js
var sampleLink = <Link to="/sample">Go To Sample</Link>
<Document next={sampleLink} />


//in Document.js
...
var Document = React.createClass({
_onClickNext: function() {
var next = this.refs.next.getDOMNode();
next.querySelectorAll('a').item(0).click(); //this sounds like hack to me
},
render: function() {
return (
...
<div ref="next">{this.props.next} <img src="rightArrow.png" onClick={this._onClickNext}/></div>
...
);
}
});
...

这是我想要的密码:

//in MasterPage.js
var sampleLink = <Link to="/sample">Go To Sample</Link>
<Document next={sampleLink} />


//in Document.js
...
var Document = React.createClass({
render: function() {
return (
...
<div onClick={this.props.next.go}>{this.props.next.label} <img src="rightArrow.png" /> </div>
...
);
}
});
...
260175 次浏览
小开

Https://github.com/rackt/react-router/blob/bf89168acb30b6dc9b0244360bcbac5081cf6b38/examples/transitions/app.js#l50

或者你甚至可以尝试执行 onClick this (更暴力的解决方案) :

window.location.assign("/sample");
小开

好吧，我想我能找到一个合适的解决办法。

现在，我不再将 <Link/>作为 道具发送到 Document，而是发送 <NextLink/>，它是用于 response-router Link 的自定义包装器。通过这样做，我可以在避免 Document 对象中包含路由代码的同时，将右箭头作为 Link 结构的一部分。

更新后的代码如下:

//in NextLink.js
var React = require('react');
var Right = require('./Right');


var NextLink = React.createClass({
propTypes: {
link: React.PropTypes.node.isRequired
},


contextTypes: {
transitionTo: React.PropTypes.func.isRequired
},


_onClickRight: function() {
this.context.transitionTo(this.props.link.props.to);
},


render: function() {
return (
<div>
{this.props.link}
<Right onClick={this._onClickRight} />
</div>
);
}
});


module.exports = NextLink;


...
//in MasterPage.js
var sampleLink = <Link to="/sample">Go To Sample</Link>
var nextLink = <NextLink link={sampleLink} />
<Document next={nextLink} />


//in Document.js
...
var Document = React.createClass({
render: function() {
return (
...
<div>{this.props.next}</div>
...
);
}
});
...

P.S : 如果您使用的是最新版本的反应路由器，您可能需要使用 this.context.router.transitionTo而不是 this.context.transitionTo。此代码对于反应路由器0.12.X 版本可以正常工作。

小开
最佳答案

React 路由器 v6-React 17 + (更新于01/14/2022)

import React, {useCallback} from 'react';
import {useNavigate} from 'react-router-dom';


export default function StackOverflowExample() {
const navigate = useNavigate();
const handleOnClick = useCallback(() => navigate('/sample', {replace: true}), [navigate]);


return (
<button type="button" onClick={handleOnClick}>
Go home
</button>
);
}

注意: 对于这个答案，v6和 v5之间的一个主要变化是 useNavigate现在是首选的 React 钩子。不推荐使用 useHistory。

React 路由器 v5-React 16.8 + with Hooks

如果您正在利用 反应钩，您可以利用来自 React 路由器 v5的 useHistory API。

import React, {useCallback} from 'react';
import {useHistory} from 'react-router-dom';


export default function StackOverflowExample() {
const history = useHistory();
const handleOnClick = useCallback(() => history.push('/sample'), [history]);


return (
<button type="button" onClick={handleOnClick}>
Go home
</button>
);
}

如果不想使用 useCallback，编写单击处理程序的另一种方法

const handleOnClick = () => history.push('/sample');

反应路由器 v4-重定向组件

V4推荐的方法是允许呈现方法捕获重定向。使用状态或道具来确定是否需要显示重定向组件(然后触发重定向)。

import { Redirect } from 'react-router';


// ... your class implementation


handleOnClick = () => {
// some action...
// then redirect
this.setState({redirect: true});
}


render() {
if (this.state.redirect) {
return <Redirect push to="/sample" />;
}


return <button onClick={this.handleOnClick} type="button">Button</button>;
}

参考资料: https://reacttraining.com/react-router/web/api/Redirect

反应路由器 v4-参考路由器上下文

您还可以利用公开给 React 组件的 Router上下文。

static contextTypes = {
router: PropTypes.shape({
history: PropTypes.shape({
push: PropTypes.func.isRequired,
replace: PropTypes.func.isRequired
}).isRequired,
staticContext: PropTypes.object
}).isRequired
};


handleOnClick = () => {
this.context.router.push('/sample');
}

这就是 <Redirect />在引擎盖下的工作原理。

参考资料: https://github.com/ReactTraining/react-router/blob/master/packages/react-router/modules/Redirect.js#L46,L60

反应路由器 v4-外部变异历史对象

如果仍然需要执行与 v2的实现类似的操作，可以创建 BrowserRouter的副本，然后将 history作为可导出常量公开。下面是一个基本的例子，但是如果需要的话，您可以编写它来注入可定制的道具。对于生命周期有一些注意事项，但是它应该总是重新呈现路由器，就像在 v2中一样。这对于在动作函数的 API 请求之后进行重定向非常有用。

// browser router file...
import createHistory from 'history/createBrowserHistory';
import { Router } from 'react-router';


export const history = createHistory();


export default class BrowserRouter extends Component {
render() {
return <Router history={history} children={this.props.children} />
}
}


// your main file...
import BrowserRouter from './relative/path/to/BrowserRouter';
import { render } from 'react-dom';


render(
<BrowserRouter>
<App/>
</BrowserRouter>
);


// some file... where you don't have React instance references
import { history } from './relative/path/to/BrowserRouter';


history.push('/sample');

最新的 BrowserRouter延期: https://github.com/ReactTraining/react-router/blob/master/packages/react-router-dom/modules/BrowserRouter.js

反应路由器 v2

将一个新状态推送到 browserHistory实例:

import {browserHistory} from 'react-router';
// ...
browserHistory.push('/sample');

参考资料: https://github.com/reactjs/react-router/blob/master/docs/guides/NavigatingOutsideOfComponents.md

小开

反应路由器4

您可以轻松地通过 v4中的上下文调用 push 方法:

this.context.router.push(this.props.exitPath);

其背景是:

static contextTypes = {
router: React.PropTypes.object,
};
小开

反应路由器4包括一个 路由器 HOC，它可以让你通过 this.props访问 history对象:

import React, {Component} from 'react'
import {withRouter} from 'react-router-dom'


class Foo extends Component {
constructor(props) {
super(props)


this.goHome = this.goHome.bind(this)
}


goHome() {
this.props.history.push('/')
}


render() {
<div className="foo">
<button onClick={this.goHome} />
</div>
}
}


export default withRouter(Foo)
小开

还是 JS:)这个还能用... 。

var linkToClick = document.getElementById('something');
linkToClick.click();


<Link id="something" to={/somewhaere}> the link </Link>
小开

在 版本5. x中，你可以使用 react-router-dom的 useHistory钩子:

// Sample extracted from https://reacttraining.com/react-router/core/api/Hooks/usehistory
import { useHistory } from "react-router-dom";


function HomeButton() {
const history = useHistory();


function handleClick() {
history.push("/home");
}


return (
<button type="button" onClick={handleClick}>
Go home
</button>
);
}
小开

如果你想 extend的 Link组件利用一些逻辑在它的 onClick()处理程序，这里是如何:

import React from 'react';
import { Link } from "react-router-dom";


// Extend react-router-dom Link to include a function for validation.
class LinkExtra extends Link {
render() {
const linkMarkup = super.render();
const { validation, ...rest} = linkMarkup.props; // Filter out props for <a>.
const onclick = event => {
if (!this.props.validation || this.props.validation()) {
this.handleClick(event);
} else {
event.preventDefault();
console.log("Failed validation");
}
}


return(
<a {...rest} onClick={onclick} />
)
}
}


export default LinkExtra;

用法

<LinkExtra to="/mypage" validation={() => false}>Next</LinkExtra>
小开

这里的答案已经过时了。

反应路由器6

不推荐使用 useHistory的版本6改为使用 useNavigate钩子。

import { useNavigate } from 'react-router-dom'


const navigate = useNavigate()


navigate(`/somewhere`, { replace: true })

提交答案