我是ReactJS和React-Router的新手。我有一个组件通过道具接收来自 react-router 的<Link/>对象。每当用户点击下一个＆＃39;我希望手动调用<Link/>对象。
现在，我正在使用参考访问支持实例并手动点击“＆＃39; a＆＃39; <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>
...
);
}
});
...
答案 0 :(得分：154)
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
您还可以利用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 />在幕后工作的方式。
如果您仍需要执行与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
将新状态推送到browserHistory实例：
import {browserHistory} from 'react-router';
// ...
browserHistory.push('/sample');
参考：https://github.com/reactjs/react-router/blob/master/docs/guides/NavigatingOutsideOfComponents.md
答案 1 :(得分：66)
React Router 4包含withRouter HOC，可让您通过history访问this.props个对象：
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)
答案 2 :(得分：4)
或者您甚至可以尝试执行onClick（更暴力的解决方案）：
window.location.assign("/sample");
答案 3 :(得分：2)
好的，我认为我能够为此找到合适的解决方案。
现在，我发送<Link/>而不是将<NextLink/>作为 prop 发送给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>
...
);
}
});
...
是react-router Link的自定义包装器。通过这样做，我可以将右箭头作为Link结构的一部分，同时仍然避免在Document对象中包含路由代码。
更新的代码如下所示：
this.context.router.transitionTo P.S ：如果您使用的是最新版本的react-router，则可能需要使用this.context.transitionTo而不是{{1}}。此代码适用于react-path版本0.12.X。
答案 4 :(得分：2)
您可以通过v4中的上下文轻松调用push方法：
this.context.router.push(this.props.exitPath);
上下文是：
static contextTypes = {
router: React.PropTypes.object,
};
答案 5 :(得分：0)
再次是JS :)仍然有效....
var linkToClick = document.getElementById('something');
linkToClick.click();
<Link id="something" to={/somewhaere}> the link </Link>
答案 6 :(得分：0)
您可以使用react-router-dom的{{3}}钩子：
// Sample extracted from https://reacttraining.com/react-router/core/api/Hooks/usehistory
import { useHistory } from "react-router-dom";
function HomeButton() {
let history = useHistory();
function handleClick() {
history.push("/home");
}
return (
<button type="button" onClick={handleClick}>
Go home
</button>
);
}
答案 7 :(得分：0)
如果您希望 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>