如何以编程方式在 React Router v4、v5 和 v6 中导航？

使用 React Router 以编程方式导航

在 React Router 中，Link 元素支持使用超链接进行本机导航。但是，对于链接之外的编程导航，您可以利用以下方法。

React Router v6.6.1 及更高版本：useNavigate Hook

使用 useNavigate 钩子，如下所示：

import { useNavigate } from "react-router-dom";

function HomeButton() {
  const navigate = useNavigate();

  function handleClick() {
    navigate("/home");
  }

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

React Router v5.1.0 和上图：useHistory Hook

对于功能组件，请考虑 useHistory hook：

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

React Router v4：多种方法

1. 与路由器高阶组件

将历史对象作为组件属性注入：

import { withRouter } from "react-router-dom";

const Button = withRouter(({ history }) => (
  <button
    type="button"
    onClick={() => { history.push("/new-location") }}
  >
    Click Me!
  </button>
));

2. 组合和渲染路线

渲染一条始终与当前位置匹配的无路径路线，通过history提供history方法prop:

import { Route } from "react-router-dom";

const Button = () => (
  <Route
    render={({ history }) => (
      <button
        type="button"
        onClick={() => { history.push("/new-location") }}
      >
        Click Me!
      </button>
    )}
  />
);

3. Context

通过 React Context API 访问历史记录：

const Button = (props, context) => (
  <button
    type="button"
    onClick={() => {
      context.history === history.push === history.push;
      context.history.push('/new-location')
    }}
  >
    Click Me!
  </button>
);

Button.contextTypes = {
  history: PropTypes.shape({
    push: PropTypes.func.isRequired
  })
};

为了简单起见，我们建议使用 withRouter 高阶组件或通过组合渲染无路径路由。

以上是如何以编程方式在 React Router v4、v5 和 v6 中导航？的详细内容。更多信息请关注PHP中文网其他相关文章！