揭秘React Router v6：基本概念及术语剖析

2023-11-21 07:29:58

React Router v6是React官方推荐的路由库，它提供了强大的路由功能，使您能够构建复杂且动态的单页应用程序。在本文中，我们将着重介绍React Router v6的基本概念和术语词汇，帮助您更深入地理解其工作原理。

路由

路由是指将URL映射到应用程序中的组件或视图的过程。在React Router v6中，路由通过<Route>组件来实现。<Route>组件定义了URL路径和要渲染的组件之间的映射关系。例如：

<Route path="/" element={<Home />} />

这条路由规则表示当访问根URL（即"/"）时，将渲染<Home>组件。

路径

路径是用于匹配URL的字符串。在<Route>组件中，可以使用path属性来指定路径。路径可以是简单的字符串，也可以是正则表达式。例如：

<Route path="/users/:id" element={<User />} />

这条路由规则表示当访问"/users/1"或"/users/2"等URL时，将渲染<User>组件，并且id参数将被设置为"1"或"2"。

组件

组件是React Router v6用于渲染视图的基本构建块。组件可以是函数组件或类组件。在<Route>组件中，可以使用element属性来指定要渲染的组件。例如：

<Route path="/" element={<Home />} />

这条路由规则表示当访问根URL（即"/"）时，将渲染<Home>组件。

参数

参数是路由路径中可变的部分。参数可以从URL中提取，并传递给组件作为props。例如，在以下路由规则中，id参数可以从URL中提取，并传递给<User>组件作为props：

<Route path="/users/:id" element={<User />} />

导航是指在应用程序中从一个视图切换到另一个视图的过程。在React Router v6中，可以使用<Link>组件或useNavigate钩子来实现导航。<Link>组件允许您通过单击或点击来导航到其他视图，而useNavigate钩子允许您以编程方式导航到其他视图。例如：

import { Link, useNavigate } from "react-router-dom";

const Home = () => {
  const navigate = useNavigate();

  return (
    <div>
      <Link to="/users">Users</Link>
      <button onClick={() => navigate("/users")}>Go to Users</button>
    </div>
  );
};

路由规则

路由规则是定义URL路径和组件之间映射关系的规则。在React Router v6中，路由规则通过<Route>组件来实现。<Route>组件可以定义多个路由规则，这些路由规则将按照它们的顺序进行匹配。当一个URL与某个路由规则匹配时，将渲染该路由规则指定的组件。

嵌套路由

嵌套路由是指在父路由中定义子路由。在React Router v6中，可以使用<Outlet>组件来实现嵌套路由。<Outlet>组件是一个特殊的组件，它允许您在父路由中渲染子路由的视图。例如：

<Route path="/">
  <Outlet />
</Route>
<Route path="/users">
  <User />
  <Outlet />
</Route>
<Route path="/users/:id">
  <UserDetail />
</Route>

这条路由规则表示当访问根URL（即"/"）时，将渲染<Outlet>组件，当访问"/users"时，将渲染<User>组件和<Outlet>组件，当访问"/users/1"或"/users/2"等URL时，将渲染<UserDetail>组件。

嵌套视图

嵌套视图是指在父视图中渲染子视图。在React Router v6中，可以使用<Outlet>组件来实现嵌套视图。<Outlet>组件是一个特殊的组件，它允许您在父视图中渲染子视图的组件。例如：

const Home = () => {
  return (
    <div>
      <h1>Home</h1>
      <Outlet />
    </div>
  );
};

const Users = () => {
  return (
    <div>
      <h1>Users</h1>
      <Outlet />
    </div>
  );
};

const UserDetail = () => {
  return (
    <div>
      <h1>User Detail</h1>
    </div>
  );
};

const App = () => {
  return (
    <Routes>
      <Route path="/" element={<Home />} />
      <Route path="/users" element={<Users />} />
      <Route path="/users/:id" element={<UserDetail />} />
    </Routes>
  );
};

在这个示例中，<Home>组件是父视图，<Users>组件和<UserDetail>组件是子视图。当访问根URL（即"/"）时，将渲染<Home>组件和<Outlet>组件，当访问"/users"时，将渲染<Users>组件和<Outlet>组件，当访问"/users/1"或"/users/2"等URL时，将渲染<UserDetail>组件。