React Router 关键知识点回顾

安装 React Router

npm i react-router
npm i react-router-dom
1
2

配置路由

使用React Router来定义应用的路由其实比较简单，只需要简单的两个步骤：

1. 在项目根目录下的index.tsx文件中声明堆栈路由。

<BrowserRouter>
  <App />
</BrowserRouter>
1
2
3

2. 在堆栈式路由包裹的组件中声明对应的路由信息

function App() {
  return (
    <Routes>
      <Route path="/" element={<Home />}></Route>
      <Route path="/about" element={<About />}></Route>
    </Routes>
  );
}
1
2
3
4
5
6
7
8

Link 组件使用

在react-router-dom中组件相当于 HTML 中的标签，我们可以通过它来实现页面组件之间的跳转，我们可以在上述的例子基础上添加一个导航组件，进行页面的跳转。

const Nav: React.FC = () => {
  return (
    <nav>
      <Link to="/">首页</Link>
      <Link to="/about">关于</Link>
    </nav>
  );
};

function App() {
  return (
    <>
      <Nav />
      <Routes>
        <Route path="/" element={<Home />}></Route>
        <Route path="/about" element={<About />}></Route>
      </Routes>
    </>
  );
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

NavLink 组件使用

在react-router-dom中有一个跟组件类似的导航组件，那就是组件。这个组件与的不同在于它可以让我们知道哪个菜单组件是出于激活状态，从而让我们可以动态的进行样式设置。具体的例子如下：

return (
  <nav>
    <NavLink to="/">首页</NavLink>
    <NavLink to="/about">关于</NavLink>
  </nav>
);
1
2
3
4
5
6

nav a.active {
  background: skyblue;
}
1
2
3

上述例子中，我们为当前激活的菜单设置了样式，因为组件在默认情况下，会在激活状态下的菜单添加一个active的样式类，我们只要对这个样式类进行样式控制就可以。这个只是简单的操作。我们还可以对当前激活状态下的菜单组件控制如下属性：

• className
• syle
• children

在这里我们只是对className属性控制进行一个代码举例，具体的代码如下：

function navLinClassName(props: NavLinClassNameProps): string {
  return props.isActive ? "active" : "";
}

return (
  <nav>
    <NavLink to="/" className={navLinClassName}>
      首页
    </NavLink>
    <NavLink to="/about" className={navLinClassName}>
      关于
    </NavLink>
  </nav>
);
1
2
3
4
5
6
7
8
9
10
11
12
13
14

编程式导航

在react-router-dom中提供了一个useNavigate的钩子函数，此钩子函数主要是让我们实现编程式导航。实现编程式导航的方式有两种：

1. 跳转到具体的地址

<button onClick={() => navigate("/order-summary")}>跳转到订单汇总页</button>
1

2. 传递您想要进入历史堆栈的增量

<button onClick={() => navigate(-1)}>返回</button>
1

上述就是两中进行编程式导航的方式，因为react-router采用的是堆栈路由策略，所以我们在进行导航的时候进行的操作都是进栈和出栈的操作，而当我们有业务需要不让跳转的路由进入到堆栈中时，我们可以使用replace来控制，具体实例入下：

// order-summary这条路由数据就不会进入到路由堆栈中，这样当使用navigate(-1)时就不会返回这条路由
<button onClick={() => navigate("/order-summary", { replace: true })}>
  跳转到订单汇总页
</button>
1
2
3
4

路由嵌套

在react-router中实现路由嵌套其实很简单，我们只要实现如下几个步骤就可以实现：

1. 在Routes中声明嵌套路由关系

<Route path="/products" element={<Products />}>
  <Route path="hot" element={<HotProducts />}></Route>
  <Route path="baseList" element={<BaseProducts />}></Route>
</Route>
1
2
3
4

2. 在嵌套路由根组件中使用Outlet声明子路由对应组件展示位置

const Products: React.FC = () => {
  return (
    <>
      <input type="text" pattern="搜索产品" />
      <nav>
        <Link to="/products/hot">热门产品</Link>
        <Link to="baseList">产品列表</Link>
      </nav>
      <Outlet />
    </>
  );
};
1
2
3
4
5
6
7
8
9
10
11
12

3. 需要注意的细节

在上述的例子中，我们看到组件的to属性设置的值有不同，这里我们需要说明一下，假如跳转的地址带有/字符的话则是绝对路由，而不带/字符字符的话则是相对路径。

就比如上述的例子，baseList是相对于products这个路径下的子路由，因为 baseList 路由嵌套在 products 下。而/products/hot采用了绝对路由，所以我们需要在 hot 子路由的基础上添加父组件的路由。

索引路由

在使用路由嵌套的时候，有一个索引路由的概念，这个索引路由相当于为根级路由设置对应的组件。具体的实例如下：

<Route path="/products" element={<Products />}>
  <Route index element={<ProductsIndex />} />
  <Route path="hot" element={<HotProducts />}></Route>
  <Route path="baseList" element={<BaseProducts />}></Route>
</Route>
1
2
3
4
5

通过上述的例子我们可以看到我们在Route组件中声明了index属性，这样我们路由在访问products时，页面就会渲染ProductsIndex的组件。

动态路由

有些时候我们需要动态拼接路由，例如我们有一个用户列表，点击对应的用户后会跳转到对应的页面，而我们的路由地址会带上用户的 ID，形成动态路由。具体的代码如下：

<Route path="user" element={<Users />}>
  <Route index element={<UserIndex />}></Route>
  <Route path="userInfo/:id" element={<UserInfo />}></Route>
</Route>
1
2
3
4

const UserIndex: React.FC = () => {
  const navigate = useNavigate();

  return (
    <div>
      <p onClick={() => navigate("userInfo/1")}>用户1</p>
      <p onClick={() => navigate("userInfo/2")}>用户2</p>
      <p onClick={() => navigate("userInfo/3")}>用户3</p>
    </div>
  );
};

const UserInfo: React.FC = () => {
  let params = useParams();

  return <div>用户ID：{params.id}</div>;
};
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

懒路由加载

为了项目打包能够根据页面路由来拆分打包，从而达到最好的加载速度，我们可以使用懒路由加载来实现，具体的代码如下：

const AblutLayout = React.lazy(() => import('./components/About'))

<Route path='/about' element={
  <React.Suspense fallback='Loading....'>
    <AblutLayout />
  </React.Suspense>
}></Route>
1
2
3
4
5
6
7