React路由配置

React 路由[V6]

1.集成应用

//创建应用
create-react-app 项目名
//安装路由库
npm install react-router-dom@6.4.3

项目中应用

// src/index.js
import React from "react";
import ReactDOM from "react-dom/client";
// createBrowserRouter: 用于创建基于浏览器历史记录的路由系统
// RouterProvider: 用于配置路由系统的组件
import { createBrowserRouter, RouterProvider } from "react-router-dom";
// 创建路由系统
const router = createBrowserRouter([
  // 当用户在浏览器中访问 / 路径时,渲染对应组件
  { path: "/", element: <Home /> },
]);
const root = ReactDOM.createRoot(document.getElementById("root"));
// 使路由规则生效
root.render(<RouterProvider router={router} />);

2.配置路由组件

01.创建页面组件

// src/pages/home/index.js
import React from "react";
​
export default function HomePage() {
  return <div>首页页面</div>;
}
// src/pages/news/index.js
import React from "react";
​
export default function HomePage() {
  return <div>新闻页面</div>;
}

02.配置路由规则

// src/index.js
import HomePage from "./pages/home";
// 注意: 在 v6 版本中，请求路径 / 不再需要使用 exact 属性
const router = createBrowserRouter([
  // 当用户在浏览器中访问 / 路径时, 渲染 <HomePage /> 组件
  { path: "/", element: <HomePage /> },
  // 当用户在浏览器中访问 /topic 路径时, 渲染 <TopicPage /> 组件
  { path: "/topic", element: <TopicPage /> },
]);

3.嵌套路由

使一级路由和二级路由关联

const router = createBrowserRouter([
  // 当用户在浏览器中访问 /news 路径时, 渲染 <NewsPage /> 组件
  {
    path: "/news",
    element: <NewsPage />,
    children: [
      // 当用户在浏览器中访问 /news/company 路径时, 将 <CompanyNewsPage /> 组件渲染到 <NewsPage /> 组件中
      { path: "company", element: <CompanyNewsPage /> },
      // 当用户在浏览器中访问 /news/industry 路径时, 将 <IndustryNewsPage /> 组件渲染到 <NewsPage /> 组件中
      { path: "industry", element: <IndustryNewsPage /> },
    ],
  },
]);

在一级路由页面添加占位符(<Outlet />)给子级路由渲染位置

// src/pages/news/index.js
import { Outlet } from "react-router-dom";
​
export default function NewsPage() {
  // 子路由页面组件将会被渲染到占位符组件所在的位置
  return <Outlet />;
}

4.导航链接

使用 react 提供的 Link 组件实现路由跳转,

通过 NavLink 组件生成的链接在被激活时 React Router 会为其添加激活类名，默认激活类名为 active

 <div>
      <Link to="/">首页</Link>
      <ink to="/topic">专题</Link>
      <ink to="/news">新闻</Link>
    </div>
----------------------------
<div>
      <NavLink to="/">首页</NavLink>
      <NavLink to="/topic">专题</NavLink>
      <NavLink to="/news">新闻</NavLink>
 </div>

5.路由路径传参

01.路由规则定义可选参数

{path:"url/:参数名",element:<路由指向的组件/>}

02.页面组件中实现参数传递 (to="url/参数")

import { Link } from "react-router-dom";
​
export default function Page() {
  return (
    <div>
      <ul>
        <li>
          <Link to="/team/team-a">Team A</Link>
        </li>
        <li>
          <Link to="/team/team-b">Team B</Link>
        </li>
      </ul>
    </div>
  );
}

//获取路由参数 -参数名为路由规则中的:参数名
const { 参数名 } = useParams();

6.路由查询参数

在页面组件中进行页面跳转时实现路由传递参数

01.配置路由规则

const router = createBrowserRouter([
  {
    path: "/",
    element: <Layout />,
    children: [{ path: "login", element: <LoginPage /> }],
  },
]);

02.页面组件传参 （路径？路由参数）

export default function HomePage() {
  return (
    <p>
      <Link to="/login?returnUrl=testUrl">登录</Link>
    </p>
  );
}

03.获取路由参数

// 获取路由查询参数操作对象
const [searchParams] = useSearchParams();
// 获取路由参数 returnUrl 的值
const returnUrl = searchParams.get("returnUrl");

7.页面跳转回到顶部

01.页面在进行跳转时滚动的位置不会回滚到顶部 使用 react 提供的<ScrollRestoration/>组件可以在跳转的页面实现页面回滚到顶部

import { ScrollRestoration } from "react-router-dom";
​
export default function Layout() {
  return <ScrollRestoration />;
}

02.阻止回滚到顶部 通过 Link 组件的 preventScrollReset 选项阻止滚动恢复

<Link to="/topic" preventScrollReset={true}>
  专题
</Link>

8.路由组件懒加载

01.通过 React 提供的 lazy 方法和 Suspense 组件实现路由组件懒加载 lazy 方法用于懒加载组件、Suspense 组件用于渲染加载过程中的等待状态。

// 通过懒加载的方式导入组件
const HomePage = lazy(() => import("./pages/home"));
//组件实现懒加载状态
const router = createBrowserRouter([
  {
    path: "/",
    element: <Layout />,
    children: [
      {
        path: "",
        element: (
          <Suspense fallback={<Fallback />}>
            //
            <Fallback />
            为组件加载过程中的样式组件
            <HomePage />
          </Suspense>
        ),
      },
    ],
  },
]);

02.Suspense 组件复用实现懒加载状态

创建 loadable 方法复用 Suspense 组件

export default function loadable(Component) {
  return function (props) {
    return (
      <Suspense fallback={<Fallback />}>
        <Component {...props} />
      </Suspense>
    );
  };
}

// src/index.js
// 1. 多行选择: 按住鼠标滚动拖动
// 2. 选择下一个单词: alt + shift + =>
// 3. 选择到行尾: ctrl + shift + =>
// 4. 选择下一个字符: shift + =>
const HomePage = loadable(lazy(() => import("./pages/home")));

9.404 页面配置

创建自己定义的 404 组件页面 NotFoundPage，使用 errorElement 方法，当用户访问了一个不存在的路由路径时就会跳转该页面。

const router = createBrowserRouter([
  {
    path: "/",
    // 当用户访问了一个不存在的路由路径时, 渲染 PageNotFound 组件
    errorElement: <NotFoundPage />,
  },
]);