React Router V7使用详解

xiangzhihong
607 阅读6分钟

1，安装

React Router是React生态系统中最流行的路由解决方案，它允许开发者在单页应用的不同页面之间进行切换，而不需要重新加载整个页面，React Router与React框架深度集成，使得开发者在单页面应用中进行页面切换时变得轻而易举。

作为官方推荐的路由解决方案，React Router提供了丰富的功能集，包括基本的路由导航、嵌套路由、动态路由、路由懒加载、路由鉴权以及基于组件的路由配置、路由参数、通配符等。此外，它还支持由React系统提供的过渡动画效果、自动激活CSS类的链接、URL的编码等路由功能。作为React生态系统中重要的成员，React Router基本能够满足Web应用开发中所有的路由开发需求。

对于已经存在的React项目来说，如果还没有安装React Router路由库，可以使用如下的命令从npm registry中安装React Router。

npm install react-router

如果是一个全新的项目，那么也可以选择带有React Router路由的基本模板来创建React项目，命令如下。

npx create-react-router@latest my-react-router-app

2，路由器

React Router在组件顶层放置了一个路由器xxRouter组件,里面维护了各种路由Route组件。路由器一共分为两种，BrowserRouter和HashRouter。

BrowserRouter

  • 基于history模式：页面跳转原理是使用了HTML5为浏览器全局的history对象新增了两个API，包括 history.pushState、history.replaceState,和vue router的history模式实现一致

  • 最终实现，直接拼接路径，例如localhost:8080/about

  • 后端需要做处理，因为我们在浏览器中输入链接时会触发一个get请求，localhost:8080/about的形式，实际上也会去匹配后端的/about路由。

HashRouter

  • 基于hash模式：页面跳转原理是使用了location.hash、location.replace；和vue router的hash模式实现一致.

  • 在域名后，先拼接/#，再拼接路径；也就是利用锚点，实现路由的跳转；例如:localhost:8080/#/about

  • 我们切换路由时实际上切换的是#/xx的部分，不改变域名，所以不会触发新的请求，也就无需后端做处理。

二者的使用方式类似，不会影响其他路由组件的使用：

import { StrictMode } from "react";
import { createRoot } from "react-dom/client";
import { HashRouter} from "react-router";


import App from "./App.tsx";


createRoot(document.getElementById("root")!).render(
  <StrictMode>
    <HashRouter>
      <App/>
    </HashRouter>
  </StrictMode>
);

3，路由

配置路由

路由是通过渲染 和 组件来进行配置的，它将 path 和 对应组件关联了起来。

import React from "react";
import ReactDOM from "react-dom/client";
import { BrowserRouter, Routes, Route } from "react-router";
import App from "./app";


const root = document.getElementById("root");


ReactDOM.createRoot(root).render(
  <BrowserRouter>
    <Routes>
      <Route path="/" element={<App />} />
    </Routes>
  </BrowserRouter>
);

下面则是稍微复杂一点的例子：

<Routes>
  <Route index element={<Home />} />
  <Route path="about" element={<About />} />


  <Route element={<AuthLayout />}>
    <Route path="login" element={<Login />} />
    <Route path="register" element={<Register />} />
  </Route>


  <Route path="concerts">
    <Route index element={<ConcertsHome />} />
    <Route path=":city" element={<City />} />
    <Route path="trending" element={<Trending />} />
  </Route>
</Routes>

其中，组件用于开辟路由空间，是一个路由容器组件。组件则用于配置具体的路由规则，Route组件需要传入path和element两个主要属性，其中path属性表示路由绑定的路径，element则表示路由将要展示的组件。从源码我们可以知道其上的属性：

interface PathRouteProps {
    caseSensitive?: NonIndexRouteObject["caseSensitive"];
    path?: NonIndexRouteObject["path"];
    id?: NonIndexRouteObject["id"];
    lazy?: LazyRouteFunction<NonIndexRouteObject>;
    loader?: NonIndexRouteObject["loader"];
    action?: NonIndexRouteObject["action"];
    hasErrorBoundary?: NonIndexRouteObject["hasErrorBoundary"];
    shouldRevalidate?: NonIndexRouteObject["shouldRevalidate"];
    handle?: NonIndexRouteObject["handle"];
    index?: false;
    children?: React.ReactNode;
    element?: React.ReactNode | null;
    hydrateFallbackElement?: React.ReactNode | null;
    errorElement?: React.ReactNode | null;
    Component?: React.ComponentType | null;
    HydrateFallback?: React.ComponentType | null;
    ErrorBoundary?: React.ComponentType | null;
}
/**
 * @category Types
 */
interface LayoutRouteProps extends PathRouteProps {
}
/**
 * @category Types
 */
interface IndexRouteProps {
    caseSensitive?: IndexRouteObject["caseSensitive"];
    path?: IndexRouteObject["path"];
    id?: IndexRouteObject["id"];
    lazy?: LazyRouteFunction<IndexRouteObject>;
    loader?: IndexRouteObject["loader"];
    action?: IndexRouteObject["action"];
    hasErrorBoundary?: IndexRouteObject["hasErrorBoundary"];
    shouldRevalidate?: IndexRouteObject["shouldRevalidate"];
    handle?: IndexRouteObject["handle"];
    index: true;
    children?: undefined;
    element?: React.ReactNode | null;
    hydrateFallbackElement?: React.ReactNode | null;
    errorElement?: React.ReactNode | null;
    Component?: React.ComponentType | null;
    HydrateFallback?: React.ComponentType | null;
    ErrorBoundary?: React.ComponentType | null;
}
type RouteProps = PathRouteProps | LayoutRouteProps | IndexRouteProps;
/**
 * Configures an element to render when a pattern matches the current location.
 * It must be rendered within a {@link Routes} element. Note that these routes
 * do not participate in data loading, actions, code splitting, or any other
 * route module features.
 *
 * @category Components
 */
declare function Route$1(_props: RouteProps): React.ReactElement | null;

嵌套路由

路由可以被嵌套在父路由中。

<Routes>
  <Route path="dashboard" element={<Dashboard />}>
    <Route index element={<Home />} />
    <Route path="settings" element={<Settings />} />
  </Route>
</Routes>

父路由的 path 会自动添加到子路由的 path 中，所以上面的例子中，会创建两个路由 "/dashboard" 和 "/dashboard/settings"。子路由则通过父路由组件中的 渲染。

import { Outlet } from "react-router";


export default function Dashboard() {
  return (
    <div>
      <h1>Dashboard</h1>
      {/* 将被渲染成 <Home/> 或 <Settings/> */}
      <Outlet />
    </div>
  );
}

当匹配到/home，对应的路由组件为，则被替换为。是一个子路由占位符组件，可以理解为它就是一个插槽。其渲染出来的内容如下所示：

import Hello from "./Hello.jsx"


export default function Dashboard() {
  return (
    <div>
      <h1>Dashboard</h1>
      <Hello />
    </div>
  );
}

布局路由

没有 path 的路由看起来会有一定的嵌套关系，但不会在路由上添加额外的路径。

<Routes>
  <Route element={<MarketingLayout />}>
    <Route index element={<MarketingHome />} />
    <Route path="contact" element={<Contact />} />
  </Route>


  <Route path="projects">
    <Route index element={<ProjectsHome />} />
    <Route element={<ProjectsLayout />}>
      <Route path=":pid" element={<Project />} />
      <Route path=":pid/edit" element={<EditProject />} />
    </Route>
  </Route>
</Routes>

所谓布局路由，一般是提供布局样式，但是我们不改变路由路径，在合适的位置放入渲染路由，例如。

export function MarketingLayout(){
    return (
    	<>
        	<siderBar/>
        	{/* 用于渲染路由 */}
            <Outlet/>
        	<Footer/>
        <>
    )
}

索引路由

索引路由会在其父路由组件对应的 中进行渲染（就像是默认的子路由一样），它们通过 index 属性来进行配置。

<Routes>
  <Route path="/" element={<Root />}>
    {/* 访问 “/” 会被渲染到 Outlet 里 */}
    <Route index element={<Home />} />


    <Route path="dashboard" element={<Dashboard />}>
      {/* 访问 "/dashboard" 会被渲染到 Outlet 里  */}
      <Route index element={<DashboardHome />} />
      <Route path="settings" element={<Settings />} />
    </Route>
  </Route>
</Routes>

请注意，索引路由不能有子路由。如果你期望实现有子路由这种行为，那你可能需要一个布局路由。

路由前缀

一个不带 element 属性的 会为其子路由添加路径前缀，无须引入父布局。

<Route path="projects">
  <Route index element={<ProjectsHome />} />
  <Route element={<ProjectsLayout />}>
    <Route path="home" element={<Project />} />
  </Route>
</Route>

可以理解为给路由进行分组，单纯添加前缀，而不影响组件布局。上面示例中，我们将用/projects/home渲染出。

动态传参

如果路由的 path 包含:，那么它会被视为动态参数，当路由被匹配时，动态参数将被解析并提供给其他路由 API 接口，比如 useParams 。

<Route path="teams/:teamId" element={<Team />} />

然后，我们在另一个组件中使用useParams钩子函数获取传递的参数。

import { useParams } from "react-router";


export default function Team() {
  let params = useParams();
  // params.teamId
}

在一个路由中可以包含有多个动态参数：

<Route path="/c/:categoryId/p/:productId" element={<Product />} />

可选参数

在动态参数后面添加 ? 可以使其变为可选参数。

<Route path=":lang?/categories" element={<Categories />} />

也可以在静态字符串后面加上 ?，使其变为可选参数：

<Route path="users/:userId/edit?" component={<User />} />

通配符

也被称为 “捕获所有” 和 * 路由，可以用来创建动态路由，匹配URL中的特定部分。如果一个路由模式以 /* 结尾，后面的任意字符串都会匹配到，也包括其他的 /。

<Route path="files/*" element={<File />} />

同样的，我们可以使用useParams钩子函数来获取传递的参数值：

let params = useParams();
// `params["*"]` 将包含 `files/` 之后剩余的URL内容。
let filePath = params["*"];

4，导航

声明式路由导航

所谓声明式路由导航，就是在组件中添加跳转链接，点击该链接进行跳转，本质是对a标签的封装。

Link

不需要激活样式时，可以使用 组件。

import { Link } from "react-router";


export function LoggedOutMessage() {
  return (
    <p>
      您已退出. <Link to="/login">再次登录</Link>
    </p>
  );
}
NavLink

该组件适用于那些需要渲染激活状态的导航链接。

import { NavLink } from "react-router";


export function MyAppNav() {
  return (
    <nav>
      <NavLink to="/" end>
        Home
      </NavLink>
      <NavLink to="/trending" end>
        Trending Concerts
      </NavLink>
      <NavLink to="/concerts">All Concerts</NavLink>
      <NavLink to="/account">Account</NavLink>
    </nav>
  );
}

当 处于激活状态时，它会自动拥有一个 .active 类名，以便于使用 CSS 轻松设置样式：

a.active {
  color: red;
}

它还在 className（类名）、style（样式）以及 children（子元素）上有回调属性，这些回调属性带有活动状态，可用于内联样式设置或条件渲染。

// style
<NavLink
  to="/messages"
  style={({ isActive }) => ({
    color: isActive ? "red" : "black",
  })}
>
  Messages
</NavLink>

编程式路由导航

按照编程要求进行路由跳转，例如：

  • 我们点击某个按钮，然后导航到其他页面。

  • 延时多少秒后，自动导航到其他页面。

核心是满足某个条件触发方法进行跳转，而不是让用户手动去点击导航链接。该方式使得路由跳转更灵活，且不会增加新的DOM元素。

useNavigate

useNavigate主要用于在代码逻辑中实现。首先需要获得导航方法，然后通过事件来触发导航。

import { useNavigate } from "react-router";


export function LoginPage() {
  let navigate = useNavigate();


  return (
    <>
      <MyHeader />
      <MyLoginForm
        onSuccess={() => {
          navigate("/dashboard");
        }}
      />
      <MyFooter />
    </>
  );
}

5.路由传参

url查询参数

1.路由跳转时在url后用?拼接的参数。

2.在路由组件中使用useSearchParams()接收。

参数传递
import { useNavigate } from "react-router";


export function Father() {
  	let navigate = useNavigate();
    const handleUrl = ()=>{
        navigate("/dashboard?name=zhansan&age=19&isOk=true");
    }


    return (
        <>
        	<button onClick={handleUrl}>url传参</button>
        </>
    );
}

实际上传递时是不带类型的，和前后端query传参一样，都是双方事先约定好了类型，接收方再根据要求自行转换。

React及其社区都遵循极简规范，我们可以根据实际开发需求来封装方法。例如使用navigate()传递url查询参数时，其参数实际上就是个query字符串，我们可以用对象进行转换。

//传递一个对象，然后返回query字符串
export function getNavigateURLString(url:string,params:object){
    for(let key of params){
        url += `${key}=${params[key]}` 
    }
    return url
}

然后，直接调用封装的方法即可。

import { useNavigate } from "react-router";
import {getNavigateURLString} from '@/utils'


export function Father() {
  let navigate = useNavigate();
  const handleUrl = ()=>{
      let params = {
          name:"zhansan",
          age:"19",
          isOk:true
      }
      navigate(getNavigateURLString("/dashboard",params));
  }
    
  return (
    <>
      <button onClick={handleUrl}>url传参</button>
    </>
  );
}
参数接收

在被导航到的路由组件，我们可通过 useSearchParams 来获取它们，该函数会返回一个URLSearchParams的实例。通过URLSearchParams实例.get(键)来获取url查询参数上对应的值。

function Son() {
  let [searchParams] = useSearchParams();
  return (
    <div>
      <p>
        {/* searchParams.get("age") 得到19 */}
        You searched for <i>{searchParams.get("age")}</i>
      </p>
    </div>
  );
}

path参数

也被称为路由参数。

1.要在路由规则处设置动态参数占位符

2.跳转时会解析路由，按照/，进行划分，将对应位置替换后得到最终的跳转链接

3.在路由组件中使用useParams 钩子中获取占位符参数。

参数传递
import { useNavigate } from "react-router";


export function Father() {
  	let navigate = useNavigate();
    const handlePath = ()=>{
        navigate(getNavigateURLString("/dashboard/true",params));
    }
  return (
    <>
      <button onClick={handlePath}>path传参</button>
    </>
  );
}
参数接收
import { useParams } from "react-router";


export default function Home() {
  const params = useParams();
  return <div>home-{params.val}</div>;
}

path参数传参的类型不够灵活，适用于参数较少的情况。如文档导航或者商品导航，这种通过改变一个值就实现页面切换的需求。

state参数

1.使用state对象传递参数。

2.在路由组件中使用useLocation()获取。

参数传递
import { useNavigate } from "react-router";


export function Father() {
    let navigate = useNavigate();
    const handleState = () => {
        navgiate("/news", {
            state: {
                name: "zhansan",
                age: 19,
                isOk: true,
            },
        });
    };


    return (
        <>
            <button onClick={handleState}>state传参</button>
        </>
    );
}

state传参是使用navgiate()的第二个参数，是一个配置对象，给该对象上的state属性赋值。

参数接收
import { useLocation } from "react-router";


export default function News() {
  const { state } = useLocation();
  console.log(state);


  return <div>news-{state.name}</div>;
}

6，路由重定向

声明式重定向

使用Navigate组件来执行声明性重定向。例如，在组件中使用，每当用户导航到About页面时，Navigate组件将声明性地执行重定向到/news。



export const About = () => {
  const shouldRedirect = true;


  return (
    <>
      <h2>About</h2>
      {shouldRedirect && <Navigate replace to="/news" />}
    </>
  );
};

编程式重定向

本质上是使用useNavigate的跳转功能。在About组件中使用useEffect，在初始渲染时跳转到其他页面，这样就实现重定向的效果。

const About = () => {
  const shouldRedirect = true;


  const navigate = useNavigate();


  useEffect(() => {
    if (shouldRedirect) {
      navigate('/home');
    }
  });


  return (
    <>
      <h2>About</h2>
    </>
  );
};

在上面的代码中，在About组件初始渲染时，调用navigate()方法跳转到其他页面。

7，路由匹配

顺序匹配

路由规则

在路由匹配时根据从上到下的原则按照顺序匹配，例如/home/first。

<Route path="/" element={<App />}>
    <Route path="home" element={<Home />}>
    	<Route path="first" element={<HomeFirst />}></Route>
    </Route>
    <Route path="about" element={<About />}>
    	<Route path="first" element={<AboutFirst />}></Route>
    </Route>
</Route>

在这个案例中，/home/first在匹配时，先匹配/,然后找home子规则，找到后继续匹配first。

先入为主

匹配到第一个满足条件的就返回，不会继续往下匹配，后续的会被忽略。即相同的路由规则，只有先出现的会被匹配到。

<Route path="/" element={<App />}>
    <Route path="home" element={<Home />}>
    	<Route path="first" element={<HomeFirst />}></Route>
    	<Route path="first" element={<HomeSecond />}></Route>
    </Route>
</Route>

在这个案例中，用/home/first进行匹配，那么最终匹配到的是HomeFirst组件。

回溯匹配

路由匹配实际上是个回溯的过程，例如：

<Route path="/" element={<App />}>
    <Route path="home">
        <Route path="first" element={<About />}></Route>
    </Route>
    <Route path="home">
        <Route path="second" element={<News />}></Route>
    </Route>
</Route>

在上面的示例中，/home/second开始匹配，先匹配到/,进入匹配。接着继续匹配到home发现第一组没有匹配到，接着回溯到上一节点继续向下匹配，最终匹配到News组件。

通配符

也称为兜底，*可以匹配任何规则。

<Route path="/" element={<App />}>
    <Route path="home">
        <Route path="first" element={<About />}></Route>
        {/* 此处会匹配所有的 /home/xx */}
        <Route path="*" element={<Hello />}></Route>
    </Route>
    <Route path="home">
        <Route path="second" element={<News />}></Route>
    </Route>
    {/* 此处会匹配所有的 /xx */}
    <Route path="*" element={<About />}></Route>
</Route>

需要说明的是，*代表通用符号，即任意值，但他不具有拦截常规路由的功能，只能拦截同样的路由。

<Route path="*" element={<Hello />}></Route>
<Route path="*" element={<Home />}></Route>
avatar
文章
阅读
粉丝