React-router:如何手动调用Link?
React-router: How to manually invoke Link?
我是 ReactJS 和 React-Router 的新手。我有一个组件通过 props 从 react-router 接收一个 <Link/>
对象。每当用户单击此组件内的 'next' 按钮时,我想手动调用 <Link/>
对象。
现在,我正在使用 refs 访问 backing instance 并手动点击 'a' 标签<Link/>
生成。
问题:有没有办法手动调用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>
...
);
}
});
...
或者你甚至可以尝试执行onClick这个(更暴力的解决方案):
window.location.assign("/sample");
好的,我想我能够找到合适的解决方案。
现在,我没有将 <Link/>
作为 prop 发送到文档,而是发送了 <NextLink/>
,它是 react-router [=29 的自定义包装=].通过这样做,我能够将右箭头作为 Link 结构的一部分,同时仍然避免在 Document 对象中包含路由代码。
更新后的代码如下所示:
//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:如果您使用的是最新版本的 react-router,您可能需要使用 this.context.router.transitionTo
而不是 this.context.transitionTo
。此代码适用于 react-router 版本 0.12.X.
React Router v6 - React 17+(更新于 01/14/2022)
import React, {useCallback} from 'react';
import {useNavigate} from 'react-router-dom';
export default function WhosebugExample() {
const navigate = useNavigate();
const handleOnClick = useCallback(() => navigate('/sample', {replace: true}), [navigate]);
return (
<button type="button" onClick={handleOnClick}>
Go home
</button>
);
}
注意:对于这个答案,v6 和 v5 之间的一个主要变化是 useNavigate
现在是首选的 React hook。 useHistory
已弃用,不推荐使用。
React Router v5 - React 16.8+ with Hooks
如果您正在利用 React Hooks,您可以利用来自 React Router v5 的 useHistory
API。
import React, {useCallback} from 'react';
import {useHistory} from 'react-router-dom';
export default function WhosebugExample() {
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');
React Router v4 - 重定向组件
v4 推荐的方法是允许您的渲染方法捕获重定向。使用 state 或 props 来确定是否需要显示重定向组件(然后触发重定向)。
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
React Router v4 - 参考路由器上下文
您还可以利用 Router
暴露给 React 组件的上下文。
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 />
的工作原理。
React Router 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,
};
React Router 4 包含一个 withRouter 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
hook:
// 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
已弃用 v6 改为使用 useNavigate
挂钩。
import { useNavigate } from 'react-router-dom'
const navigate = useNavigate()
navigate(`/somewhere`, { replace: true })
我是 ReactJS 和 React-Router 的新手。我有一个组件通过 props 从 react-router 接收一个 <Link/>
对象。每当用户单击此组件内的 'next' 按钮时,我想手动调用 <Link/>
对象。
现在,我正在使用 refs 访问 backing instance 并手动点击 'a' 标签<Link/>
生成。
问题:有没有办法手动调用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>
...
);
}
});
...
或者你甚至可以尝试执行onClick这个(更暴力的解决方案):
window.location.assign("/sample");
好的,我想我能够找到合适的解决方案。
现在,我没有将 <Link/>
作为 prop 发送到文档,而是发送了 <NextLink/>
,它是 react-router [=29 的自定义包装=].通过这样做,我能够将右箭头作为 Link 结构的一部分,同时仍然避免在 Document 对象中包含路由代码。
更新后的代码如下所示:
//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:如果您使用的是最新版本的 react-router,您可能需要使用 this.context.router.transitionTo
而不是 this.context.transitionTo
。此代码适用于 react-router 版本 0.12.X.
React Router v6 - React 17+(更新于 01/14/2022)
import React, {useCallback} from 'react';
import {useNavigate} from 'react-router-dom';
export default function WhosebugExample() {
const navigate = useNavigate();
const handleOnClick = useCallback(() => navigate('/sample', {replace: true}), [navigate]);
return (
<button type="button" onClick={handleOnClick}>
Go home
</button>
);
}
注意:对于这个答案,v6 和 v5 之间的一个主要变化是 useNavigate
现在是首选的 React hook。 useHistory
已弃用,不推荐使用。
React Router v5 - React 16.8+ with Hooks
如果您正在利用 React Hooks,您可以利用来自 React Router v5 的 useHistory
API。
import React, {useCallback} from 'react';
import {useHistory} from 'react-router-dom';
export default function WhosebugExample() {
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');
React Router v4 - 重定向组件
v4 推荐的方法是允许您的渲染方法捕获重定向。使用 state 或 props 来确定是否需要显示重定向组件(然后触发重定向)。
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
React Router v4 - 参考路由器上下文
您还可以利用 Router
暴露给 React 组件的上下文。
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 />
的工作原理。
React Router 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,
};
React Router 4 包含一个 withRouter 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
hook:
// 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
已弃用 v6 改为使用 useNavigate
挂钩。
import { useNavigate } from 'react-router-dom'
const navigate = useNavigate()
navigate(`/somewhere`, { replace: true })