路由配置

基本知识笔记：StudyNote/react-router6.md

安装组件

npm install react-router-dom
或者
yarn add react-router-dom

main.tsx 在该文件中给 App 使用 BrowserRouter

import React from "react";
import ReactDOM from "react-dom/client";
import { BrowserRouter } from "react-router-dom";
import { App } from "./App.tsx";
import "./index.css";

ReactDOM.createRoot(document.getElementById("root")!).render(
  <React.StrictMode>
    {/* 最好是将BrowserRouter放在App外面，这样app能更好使用router */}
    <BrowserRouter>
      <App />
    </BrowserRouter>
  </React.StrictMode>
);

router/props.ts 路由数组格式定义

export interface IRouteProps {
  path: string;
  element: React.ReactNode;
  name?: string;
  index?: boolean;
  children?: IRouteProps[];
}

router/index.tsx 根据定义编写routes 数组和RouterViews 组件

import { Routes, Route, Navigate } from "react-router-dom";
import { Fragment } from "react/jsx-runtime";
import { IRouteProps } from "./props";

// 简单建了两个简单的组件，稍后给出
import { Home } from "@/pages/home";
import { My } from "@/pages/my";

// 编写路由配置数组
const routes: IRouteProps[] = [
  {
    path: "/",
    element: <Home />,
    children: [
      {
        path: "my",
        element: <My />,
        index: true, // 当给属性index设置为true时，该组件为父组件的首页
      },
    ],
  },
];

// 组件逻辑
export const RouterViews = () => {
  // 路由循环递归逻辑
  const routerViews = (routes: IRouteProps[]) => {
    return routes.map((item: IRouteProps, index: number) => (
      <Fragment key={index}>
        {item.index && (
          <Route index element={<Navigate to={item.path} replace />} />
        )}
        <Route path={item.path} element={item.element}>
          {item.children && routerViews(item.children)}
        </Route>
      </Fragment>
    ));
  };

  return (
    <Routes>
      {/* 带入路由数组进行处理 */}
      {routerViews(routes)}
      {/* 应为404页面，暂时未编写 */}
      <Route path="*" element={<Navigate to="/" replace />} />
    </Routes>
  );
};

pages/home/index.tsx 每个有 children 的父组件都要记得放置 <Outlet />

import { Outlet } from "react-router-dom";

export const Home = () => {
  return (
    <>
      <div>Home</div>
      {/* 该Home的孩子会在Outlet中显示 没有设置则不会显示My */}
      <Outlet />
    </>
  );
};

pages/my/index.tsx

export const My = () => {
  return <div>My</div>;
};

显示如下，可以看到 My 显示在 Home 的下面：