React Router使用 react-router 在 React 中重定向程序化导航

我看过不少 React 教程，但每次提到使用 React-router 导航，都只会展示 Link 组件的使用方法。刚开始做项目时，遇到的第一个问题就是如何以编程方式进行路由，也就是除了点击 <Link> 组件中的内容之外，还要用其他方式进行路由。
这篇博客主要想为那些来这里寻找这个问题答案的人提供一个避难所。

1. <Redirect> 组件

我们可以使用 <Redirect> 组件进行重定向，只需传递要重定向的路由并渲染该组件即可。它已加载到 react-router-dom 库中。

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

使用此方法的最简单方法是维护组件状态内的重定向属性。

state = { redirect: null };
render() {
  if (this.state.redirect) {
    return <Redirect to={this.state.redirect} />
  }
  return(
  // Your Code goes here
  )
}

每当您想要重定向到另一个路径时，您只需更改状态以重新渲染组件，从而渲染 <Redirect> 组件。

this.setState({ redirect: "/someRoute" });

注意：
这是除 <Link> 方法之外的推荐导航方式。
文章末尾将详细讨论。

这种方法的缺点是，当我们想直接从 redux 操作重定向时，我们无法这样做。

2. useHistory 钩子

从 5.1.2 版本开始，react-router 附带了一些新的钩子，可以帮助我们访问路由器的状态。

现在，我们只需要讨论 useHistory 钩子。

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

function App() {
  let history = useHistory();
}

之后，我们可以使用 .push() 方法重定向到我们想要的任何路线。

history.push('/someRoute')

3.历史道具

每个 <Route> 组件的直接子组件都会收到 history 对象作为 prop。这与保存 React Router 会话历史记录的 history（库）相同。因此，我们可以使用它的属性导航到所需的路径。

this.props.history.push("/first");

我们在这里经常遇到的一个问题是，在那些不是 <Route> 组件直接子组件的组件中，没有 history 属性。使用 withRouter 函数可以轻松解决这个问题。

3.1. withRouter

withRouter 是 react-router-dom 库提供的一个函数，它帮助我们访问非 <Route> 组件直接子组件中的 history prop。
导入 withRouter

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

现在，为了获取组件内部的历史记录属性，我们需要在导出组件时用 withRouter 包装它。

export default withRouter(yourComponent);

我们现在可以访问与上面相同的历史道具来进行我们所需的导航。

4. 创建历史记录

上面我们学到的方法已经涵盖了构建 React 应用时遇到的大多数情况，那么为什么还要用到第四种方法呢？因为
每次我们需要重定向，比如说从一个 Redux Action 中重定向，我们总是需要将 history 传递给 Action，这不必要地增加了参数的数量。因此，使用这种方法可以使代码更简洁。

在这种方法中，我们创建了自定义历史实例，可以将其导入其他文件进行重定向。

// Inside /utils/history.js
import createHistory from "history/createBrowserHistory";
export default createHistory();

由于 <BrowserRouter> 使用其自己的历史记录并且不接受任何外部历史记录属性，因此我们必须使用 <Router> 来代替它。

import { Router } from "react-router-dom";
import history from "./utils/history";

function App(){
  return(
    <Router history={history}>
    // Your Routes go here
    <Router>
  )
}

在此之后，我们可以将此历史实例导入我们想要重定向的任何文件中。

import history from "./utils/history";

history.push("/somePath");

笔记

从本质上讲，React 是一种构建 UI 的声明式方法。

声明式方法是指我们表达计算逻辑而不描述其控制流，也不描述幕后实际发生的事情。

由于这个原因，除了 <Link> 之外，推荐的导航方式是使用 <Redirect> 组件。

使用这里提到的其他方法没有坏处，只是它们与 React 的愿景不完全一致。

存储库

上述方法的完整实现可以在我的 Github 个人资料中找到。如果有人想看看这些方法在项目中的实际效果，欢迎随时探索。