React 路由：从新手到高手，React 前端页面路由的全面指南

2023-10-12 00:22:12

React 路由的基本原理

React 路由的基本原理是使用 URL 来标识不同的页面。当用户访问某个 URL 时，React 路由会根据 URL 来渲染相应的组件。例如，如果用户访问 /about URL，那么 React 路由就会渲染 About 组件。

React 路由的配置方法

React 路由的配置方法有很多种，最常见的一种是使用 <BrowserRouter> 组件。<BrowserRouter> 组件是一个路由容器，它可以将多个路由组件包含在其中。<BrowserRouter> 组件的用法如下：

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

const App = () => {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
      </Routes>
    </BrowserRouter>
  );
};

export default App;

在这个例子中，<BrowserRouter> 组件包含了两个路由组件：Home 组件和 About 组件。当用户访问 / URL 时，Home 组件就会被渲染。当用户访问 /about URL 时，About 组件就会被渲染。

React 路由的组件使用

React 路由的组件主要包括 Route 组件和 Switch 组件。Route 组件用于定义一个路由规则，它指定了当用户访问某个 URL 时，应该渲染哪个组件。Switch 组件用于包含多个 Route 组件，它只会渲染第一个匹配的 Route 组件。

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

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

export default App;

在这个例子中，<Switch> 组件包含了两个 Route 组件：Home 组件和 About 组件。当用户访问 / URL 时，Home 组件就会被渲染。当用户访问 /about URL 时，About 组件就会被渲染。

React 路由的嵌套路由

React 路由支持嵌套路由，嵌套路由允许我们在一个路由组件中定义另一个路由组件。嵌套路由的用法如下：

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

const App = () => {
  return (
    <Switch>
      <Route path="/" exact element={<Home />} />
      <Route path="/about" element={<About />}>
        <Route path="/about/team" element={<Team />} />
        <Route path="/about/history" element={<History />} />
      </Route>
    </Switch>
  );
};

export default App;

在这个例子中，<Route> 组件包含了两个 Route 组件：Home 组件和 About 组件。About 组件中又包含了两个 Route 组件：Team 组件和 History 组件。当用户访问 /about/team URL 时，Team 组件就会被渲染。当用户访问 /about/history URL 时，History 组件就会被渲染。

React 路由的懒加载

React 路由支持懒加载，懒加载可以让我们在需要的时候再加载组件。懒加载的用法如下：

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

const Home = lazy(() => import("./Home"));
const About = lazy(() => import("./About"));

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

export default App;

在这个例子中，我们使用了 lazy 函数来懒加载 Home 组件和 About 组件。当用户访问 / URL 时，Home 组件就会被加载并渲染。当用户访问 /about URL 时，About 组件就会被加载并渲染。

React 路由的传递参数

React 路由支持传递参数，传递参数的用法如下：

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

const App = () => {
  return (
    <Switch>
      <Route path="/user/:id" element={<User />} />
    </Switch>
  );
};

export default App;