携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第6天，点击查看活动详情

前言

大家好，我是小阵 🔥，一路奔波不停的码字业务员
如果喜欢我的文章，可以关注 ➕ 点赞，与我一同成长吧~😋
加我微信：zzz886885，邀你进群，一起学习交流，摸鱼学习两不误🌟

开开心心学技术大法~~

来了来了，他真的来了~

正文

React18用上了，React Router6你用上了吗？

react-router组成

router有三部分

react-router
react-router-dom
react-router-native

其中react-router是react-router-dom和react-router-native的核心，一般不作为单独包引入。

如果是web端，可直接引用react-router-dom

如果是react-native端，可以使用react-router-native包

react-router-dom

组成

components
hooks
routers
utils

因为内容太多，分为四篇来说明，先来components篇

components

Link标签
```
import * as React from "react";
import { Link } from "react-router-dom";

function UsersIndexPage({ users }) {
  return (
    <div>
      <h1>Users</h1>
      <ul>
        {users.map((user) => (
          <li key={user.id}>
            <Link to={user.id}>{user.name}</Link>
          </li>
        ))}
      </ul>
    </div>
  );
}
```
- 类似a标签，允许用户通过单击来导航到另一个路由，并不是常规的操作location.href来实现的路由跳转，表现上是每次点击link切换路由之后，只有路由组建会被切换，而不是页面刷新。
- 如果想要有刷新页面的操作，可以通过添加属性reloadDocument来实现
- Link标签的to属性指向要跳转的目标路由
  - 如果配置成/xx，则从根目录导航
  - 如果是xx不带/的，则是从当前父路由开始导航
  - 如果是..，则表示跳过一级父路由，同理，../../表示跳过两个父路由，以此类推

NavLink标签

跟Link标签类似，主要是跟活跃状态样式相关，比如，激活了某个NavLink，则是激活样式，其他则为一般样式

import * as React from "react";
import { NavLink } from "react-router-dom";

function NavList() {
  // This styling will be applied to a <NavLink> when the
  // route that it links to is currently selected.
  let activeStyle = {
    textDecoration: "underline",
  };

  let activeClassName = "underline";

  return (
    <nav>
      <ul>
        <li>
          <NavLink
            to="messages"
            style={({ isActive }) =>
              isActive ? activeStyle : undefined
            }
          >
            Messages
          </NavLink>
        </li>
        <li>
          <NavLink
            to="tasks"
            className={({ isActive }) =>
              isActive ? activeClassName : undefined
            }
          >
            Tasks
          </NavLink>
        </li>
        <li>
          <NavLink to="tasks">
            {({ isActive }) => (
              <span
                className={
                  isActive ? activeClassName : undefined
                }
              >
                Tasks
              </span>
            )}
          </NavLink>
        </li>
      </ul>
    </nav>
  );
}

默认情况下，只要路由匹配to属性，则都处于激活状态
如果是被子路由激活了，父路由理论上也会是被匹配状态，针对这种情况，可在匹配父路由使用end属性

Outlet标签

<Outlet />一般用于在父组件中渲染子路由组件。

子路由组件渲染的位置由<Outlet/>标签决定

如果父路由完全匹配，则渲染设置了index属性的默认路由，如果没有默认路由，则不渲染。

比如：

function Dashboard() {
  return (
    <div>
      <h1>Dashboard</h1>

      {/* This element will render either <DashboardMessages> when the URL is
          "/messages", <DashboardTasks> at "/tasks", or null if it is "/"
      */}
      <Outlet />
    </div>
  );
}

function App() {
  return (
    <Routes>
      <Route path="/" element={<Dashboard />}>
        <Route
          path="messages"
          element={<DashboardMessages />}
        />
        <Route path="tasks" element={<DashboardTasks />} />
      </Route>
    </Routes>
  );
}

这有点类似于vue的slot，只不过参数部分由路由url来接收

Routes与Route

Route参数

path 用来跟location对比的参数
element 定义如果匹配上path，则渲染指定的element
caseSensitive 默认为false，如果为true，则严格匹配大小写

Routes内部包裹若干Route，通过当前location来匹配Route的path，如果匹配上，则返回该Route定义的element

<Routes>
  <Route path="/" element={<Dashboard />}>
    <Route
      path="messages"
      element={<DashboardMessages />}
    />
    <Route path="tasks" element={<DashboardTasks />} />
  </Route>
  <Route path="about" element={<AboutPage />} />
</Routes>

结语

如果文章真的有帮到你，希望可以多多点赞、收藏、关注支持一波呀！！小阵会很开心哒~

文章如有错误或不严谨之处，还望指出，感谢感谢！！！

加油！

往期好文推荐「我不推荐下，大家可能就错过了史上最牛逼vscode插件集合啦！！！(嘎嘎嘎~)😄」

React Router 6：components篇

前言

正文

react-router组成

react-router-dom

components

结语