React Router 6: 重定向

一个React Router教程，教你如何在React Router 6中执行重定向。这个React Router v6教程的代码可以在这里找到。为了让你开始学习，请创建一个新的React项目（例如：create-react-app）。之后，安装React Router，并阅读下面的React Router教程，让自己与接下来的内容保持一致。

我们将从一个最小的React项目开始，它使用React Router将用户从一个页面导航到另一个页面：

import { Routes, Route, Link } from 'react-router-dom';

const App = () => {
  return (
    <>
      <h1>React Router</h1>

      <nav>
        <Link to="/home">Home</Link>
        <Link to="/about">About</Link>
      </nav>

      <Routes>
        <Route index element={<Home />} />
        <Route path="home" element={<Home />} />
        <Route path="about" element={<About />} />
        <Route path="*" element={<NoMatch />} />
      </Routes>
    </>
  );
};

在这个功能组件中，我们有来自React Router的匹配的Link和Route组件，用于home/ 和about/ 路径。此外，我们还有一个用Home组件加载的所谓Index Route和一个用NoMatch组件加载的所谓No Match Route。两者都作为后备路由。从这里开始，我们将探讨如何在React Router中进行导航。

用Navigate组件重定向

我们可以通过使用React Router的Navigate组件来执行声明性重定向。在下面的例子中，每当用户导航到关于页面时，Navigate组件将声明性地执行重定向。

import {
  Routes,
  Route,
  Link,
  Navigate,
} from 'react-router-dom';

...

const About = () => {
  const shouldRedirect = true;

  return (
    <>
      <h2>About</h2>
      {shouldRedirect && <Navigate replace to="/home" />}
    </>
  );
};

如果我们想在路由层面上管理这个问题，我们也可以使用这个替代解决方案。

const App = () => {
  const shouldRedirect = true;

  return (
    <>
      <h1>React Router</h1>

      <nav>
        <Link to="/home">Home</Link>
        <Link to="/about">About</Link>
      </nav>

      <Routes>
        <Route index element={<Home />} />
        <Route path="home" element={<Home />} />
        <Route
          path="about"
          element={
            shouldRedirect ? (
              <Navigate replace to="/home" />
            ) : (
              <About />
            )
          }
        />
        <Route path="*" element={<NoMatch />} />
      </Routes>
    </>
  );
};

const About = () => {
  return (
    <>
      <h2>About</h2>
    </>
  );
};

正如你所看到的，你可以在路由或组件层面上应用声明式重定向。基于一个特定的条件，重定向将发生。接下来让我们探讨一下如何进行编程式重定向...

用useNavigate钩子重定向

与Navigate组件及其声明式重定向相比，我们可以通过使用React Router的useNavigate Hook来执行程序化重定向。

import {
  Routes,
  Route,
  Link,
  useNavigate,
} from 'react-router-dom';

...

const About = () => {
  const shouldRedirect = true;

  const navigate = useNavigate();

  React.useEffect(() => {
    if (shouldRedirect) {
      navigate('/home');
    }
  });

  return (
    <>
      <h2>About</h2>
    </>
  );
};

每当组件渲染时，React的useEffect Hook就会运行并以编程方式执行重定向。正如你所看到的，在组件无条件渲染时启动重定向根本没有用，但可以作为一个最小的例子。你可以回到我的React Router教程，在那里，程序化重定向被用于一个实际的真实用例。

使用React Router执行重定向的最佳做法是在服务器端启动重定向，以利于SEO和性能。然而，有时你不得不回到客户端重定向，因此必须使用React Router的Navigation组件或useNavigate Hook来实现声明式或编程式重定向。