如何利用React Router重定向？

方石剑
5,802 阅读4分钟

简介

如果你是一个从事任何现代Web应用的开发者，你可能知道正确设置路由是多么重要。当你浏览许多React Router教程时，你可能会注意到他们很少提到重定向，而是专注于如何使用Link 组件。为了管理React中的路由，我们可以利用react-router-dom包。

在这篇文章中，我们将看看你可以在React中利用重定向的许多方法和场景。我们也会看看以前的一些策略，以及它们在React Router v6中的功能，这是本文写作时的最新版本。

先决条件

在这篇文章中，我们将使用react-router-dom 包，我们必须在我们的项目中安装它。这可以通过在我们的终端运行以下命令来实现。

$ npm i react-router-dom

或

$ yarn add react-router-dom

重定向和导航组件

Redirect 组件通常在以前版本的react-router-dom 包中被用来快速做重定向，只需从react-router-dom 中导入该组件，然后通过提供to 道具，传递你想要重定向的页面来使用该组件。

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

<Route path='/redirect-page' element={ <Redirect to="/error-page" /> }/>

随着React Router v6的发布，Redirect 组件被移除，取而代之的是Navigate 组件，它的操作与Redirect 组件一样，通过接收to 道具来使你重定向到你指定的页面。

import { Navigate } from 'react-router-dom';

<Route path="/redirect" element={ <Navigate to="/error-page" /> } />

请确保你已经有了这个路由。例如，如果你要重定向到"/error-page "路线，确保你在设置重定向之前已经声明了该路线。请注意下面代码中的顺序或Route 声明。

import { BrowserRouter, Routes, Route, Navigate } from 'react-router-dom';
import ErrorPage from './ErrorPage';
import Home from './Home';

function App() {
    return (
        <BrowserRouter>
            <Routes>
                <Route
                    path="/"
                    element={ <Home /> }
                />
                {/* The next line is very important for the Navigate component to work */}
                <Route
                    path="/error-page"
                    element={ <ErrorPage /> }
                />
                <Route
                    path="/redirect"
                    element={ <Navigate to="/error-page" /> }
                />
            </Routes>
        </BrowserRouter>
    );
}
export default App;

条件性重定向

这是你在构建网络应用时可能需要利用的东西。条件性重定向是基于某些标准的简单路由。一个常见的情况是，当你建立一个电子商务平台时，你不希望用户访问某些组件/模式/表格，例如结账模式/组件，直到他们将一些产品添加到购物车。如果他们试图强行进入该页面，他们应该被重定向到产品页面，以便他们可以先选择商品。

这就是所谓的条件性重定向。要做到这一点，我们将使用useState() 钩子来清空购物车数组，然后对我们的路由应用一些标准。

const [cartItems, setCartItems] = useState([]);

<Route
    path="/checkout"
    element={ cartItems.length < 1 ? <Navigate to="/products" /> : <Checkout /> }
/>;

在这个例子中，只要这个数组是空的，我们就不能访问/checkout 路线，直到cartItems 数组中至少有一个项目。

替换当前URL

在某些情况下，你可能想替换浏览器中的当前URL，而不是将其添加（即推送）到浏览器的历史记录中，要做到这一点，我们只需在Navigate 组件中添加replace 这个道具。

<Navigate replace to="/error-page" />

如果没有这个道具，浏览器将保持历史记录，包括重定向。

程序性重定向与useNavigate()

你可能对以前版本的react-router-dom 包中的useHistory() 钩子很熟悉，它被用来以编程方式重定向用户。当访问者填写完一个表格，或者如果你想在一个按钮上添加重定向功能，这是一个很好的用例。

useHistory() 钩子首先被导入，然后分配给一个变量，随后在一个按钮（例如）中被利用，一旦采取了一个特定的行动，就会重定向用户。使用onClick 事件，我们就可以调用.push() 方法来告诉React Router我们希望按钮重定向到哪里。

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

const Home = () => {
    const history = useHistory();
    return (
        {/* ... */}
        <button onClick={() => history.push('/products')}>
        {/* ... */}
    );
};

随着React Router v6的发布，我们不再利用useHistory() 钩子，而是利用useNavigate() 钩子，这很相似。

这也是通过导入钩子，然后给useNavigate() 钩子分配一个变量来实现的，就像我们在useHistory() 。我们现在可以利用返回的变量，将用户导航到其他页面。

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

const Home = () => {
    const navigate = useNavigate();
    return (
        {/* ... */}
        <button onClick={() => navigate('/products')}>
        {/* ... */}
    );
};

**注意：**与useHistory() 钩子不同，这不需要调用push 方法。我们需要做的是将路径作为参数传递给navigate 函数。

总结

在这篇文章中，我们看了一些用React Router重定向的方法，它的功能，以及在旧版本和最新的v6版本中是如何处理的。

avatar
文章
阅读
粉丝