我有一个通过 props 接收的组件<Link/>对象来自反应路由器。每当用户单击此组件内的“下一步”按钮时，我想调用<Link/>手动对象。

现在，我正在使用refs访问支持实例并手动单击“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>
         ...
      );
   }
});
...

React Router v6.8 - React 18+（更新于 02/24/2023）

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

export default function StackOverflowExample() {
  const navigate = useNavigate();
  const handleOnClick = () => navigate('/sample');

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

Docs: https://reactrouter.com/en/main/hooks/use-navigate https://reactrouter.com/en/main/hooks/use-navigate

React 路由器 v6 - React 17+

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 hook。useHistory已弃用且不推荐。

React Router v5 - 带 Hooks 的 React 16.8+

如果你正在利用反应钩子 https://reactjs.org/docs/hooks-intro.html，您可以利用useHistory来自 React Router v5 的 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');

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 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 />在幕后工作。

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

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');

Latest BrowserRouter延伸：https://github.com/ReactTraining/react-router/blob/master/packages/react-router-dom/modules/BrowserRouter.js 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 https://github.com/reactjs/react-router/blob/master/docs/guides/NavigatingOutsideOfComponents.md