React 快速上手 - 07 前端路由 react-router

2023-12-19 07:43:48

React 路由是 React 中管理路由和视图状态的库。它可以帮助您轻松地构建单页应用程序，允许用户在不同页面之间导航而无需重新加载整个页面。React 路由具有以下特点：

声明式路由：您可以使用声明式组件来定义路由，从而使您的代码更加简洁和可维护。
强大的导航功能：React 路由提供了多种导航方式，包括链接、重定向和历史记录。
客户端和服务器端渲染：React 路由支持客户端和服务器端渲染，您可以根据需要选择最适合您的应用程序的渲染方式。

安装

要使用 React 路由，您需要先将其安装到您的项目中。您可以使用以下命令通过 npm 安装：

npm install react-router-dom

先跑一个简单例子

在开始之前，我们需要先创建一个简单的 React 项目。您可以使用以下命令创建一个新的 React 项目：

npx create-react-app my-app

基础使用

React 路由使用组件来定义路由。每个路由组件都负责渲染特定视图。要定义一个路由组件，您可以使用 Route 组件。Route 组件有三个主要属性：

path：指定路由的路径。当用户访问此路径时，将渲染此路由组件。
component：指定要渲染的组件。
exact：如果为 true，则只有当路径完全匹配时才渲染此路由组件。

以下是一个简单的例子，展示如何使用 Route 组件来定义路由：

import React from "react";
import { Route, Switch } from "react-router-dom";

const App = () => {
  return (
    <Switch>
      <Route path="/" exact component={Home} />
      <Route path="/about" component={About} />
    </Switch>
  );
};

export default App;

在上面的代码中，我们定义了两个路由：/ 和 /about。当用户访问 / 路径时，将渲染 Home 组件；当用户访问 /about 路径时，将渲染 About 组件。

BrowserRouter 是需要服务端配合

BrowserRouter 是需要服务端配合的，它基于 html5 的 pushState 和 replaceState，很多浏览器不支持，存在兼容性问题。

需要匹配的将要被重定向路径

Redirect 组件用于将用户重定向到另一个路径。它有一个 to 属性，指定要重定向到的路径。以下是一个例子，展示如何使用 Redirect 组件来重定向用户：

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

const AuthRedirect = () => {
  return <Redirect to="/login" />;
};

export default AuthRedirect;

在上面的代码中，我们定义了一个 AuthRedirect 组件，它会将用户重定向到 /login 路径。

若为真，重定向操作将会把新地址加入到访问历史记录

replace 属性决定了重定向操作是否会把新地址加入到访问历史记录。如果为 true，则重定向操作将会把新地址加入到访问历史记录；如果为 false，则重定向操作不会把新地址加入到访问历史记录。以下是一个例子，展示如何使用 replace 属性来控制重定向操作是否会把新地址加入到访问历史记录：

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

const AuthRedirect = () => {
  return <Redirect to="/login" replace={true} />;
};

export default AuthRedirect;