如何在 Reactjs 的新 react-router-dom 中使用重定向 (Redirect)

Reactjs 是一个流行的前端 JavaScript 框架，它提供了许多强大的工具和技术，使得创建 Web 应用程序变得更加容易和高效。其中一个非常有用的工具是 react-router-dom，它允许您在应用程序中实现路由和导航。本文将介绍如何在 react-router-dom 中使用重定向来引导用户到其他页面或路由。

什么是重定向？

重定向是指将用户从一个 URL 地址重定向到另一个 URL 地址。在 Web 开发中，通常使用 HTTP 状态码来实现重定向。例如，当用户尝试访问一个需要登录的页面时，服务器可以返回一个 302 Found 响应码，告诉浏览器将用户重定向到登录页面。

在 react-router-dom 中，我们可以使用 <Redirect> 组件来实现重定向。这个组件可以在路由匹配成功后，将用户重定向到指定的 URL 或路由。

在 react-router-dom 中使用重定向

首先，您需要安装 react-router-dom：

npm install react-router-dom

然后，在您的 React 组件中引入 react-router-dom：

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

接下来，您可以在路由组件中使用 <Redirect> 组件。以下是一个示例：

// www.javascriptcn.com code example
import { Route, Redirect } from 'react-router-dom';

function PrivateRoute({ component: Component, authenticated, ...rest }) {
  return (
    <Route
      {...rest}
      render={(props) =>
        authenticated === true ? (
          <Component {...props} />
        ) : (
          <Redirect to={{ pathname: '/login', state: { from: props.location } }} />
        )
      }
    />
  );
}

function LoginPage() {
  return <div>Login Page</div>;
}

function HomePage() {
  return <div>Home Page</div>;
}

function App() {
  const authenticated = false;
  return (
    <div>
      <PrivateRoute path="/" component={HomePage} authenticated={authenticated} />
      <Route path="/login" component={LoginPage} />
    </div>
  );
}

在上面的示例中，我们定义了一个名为 PrivateRoute 的组件来保护需要身份验证的路由。如果用户已经通过身份验证，则 <PrivateRoute> 组件将呈现 HomePage 组件，否则它将重定向到登录页面 (/login)。

注意，我们使用了 props.location 来记录用户最初尝试访问的路由。这对于在用户成功登录后将其重定向回原始路由很有用。

总结

重定向是一种非常有用的工具，允许您在应用程序中引导用户到其他页面或路由。在 react-router-dom 中，我们可以使用 <Redirect> 组件来实现重定向。在重定向过程中，您可以使用 props.location 属性来记录用户最初尝试访问的路由。

希望这篇文章能够对您在 Reactjs 中使用重定向有所帮助！

Source: FunTeaLearn,Please indicate the source for reprints https://funteas.com/post/29155