React中无限级嵌套路由的实现（RRD-V6）

coder_glack

已于 2022-07-19 13:44:35 修改

阅读量938

点赞数 3

文章标签： react.js javascript 前端

于 2022-07-13 15:44:31 首次发布

本文链接：https://blog.csdn.net/qq_43013884/article/details/125742098

版权

本文介绍了如何在React中利用React-router-dom v6进行无限级嵌套路由的设置，包括入口文件index.js、App组件、Layout.tsx、Utils.ts和routes.ts的配置。同时，通过自定义hooks在layout.tsx、hooks.tsx和utils.tsx中实现了菜单自动高亮的功能。

摘要由CSDN通过智能技术生成

React-router-dom v6 无限级嵌套路由的实现

话不多说直接上代码
以下代码为了节省空间，有简写

入口文件 index.js

root.render(
  <BrowserRouter>
    <App />
  </BrowserRouter>
);

App组件

import React, {
    ReactNode, useEffect } from 'react'
import Layout from './layout'
import {
    Routes, Route, useNavigate } from "react-router-dom";
import NoMatch from './views/NoMatch'
import {
    HasAuthRoutes, IRoute } from './router';
import Login from './views/Login';
import AuthPage from './views/AuthPage';
import NoAuthPage from './views/NoAuthPage';

const getRouteData = (items: IRoute[]): ReactNode => {
   
  return items.map(r => {
   
    if (r.children && r.children.length > 0) {
   
      return (<Route index={
   r.path == '/'} key={
   r.key} element={
   r.component}>
        {
   getRouteData(r.children)}
      </Route>)
    }

    return (<Route index={
   r.path == '/'} key={
   r.key} path={
   r.path} element={
   r.component}></Route>)
  })
}

export default function App() {
   
  return (
    <>
      <AuthPage>
        <Routes>
          <Route path="/" element={
   <Layout />}>
            {
   getRouteData(HasAuthRoutes)}
            <Route path="*" element={
   <NoMatch />} />
          </Route>
        </Routes>
      </AuthPage>
      <NoAuthPage>
        <Routes>
          <Route path="/login" element={
   <Login />} />
        </Routes>
      </NoAuthPage>
    </>
  )
}

Layout.tsx

import React, {
    Suspense, useEffect, useState } from 'react';
import {
    LaptopOutlined, NotificationOutlined, UserOutlined } from '@ant-design/icons';
import {
    Breadcrumb, Layout, Menu, MenuProps } from 'antd';
import {
    IRoute, HasAuthRoutes, NoAuthRoutes } from '../router'
import {
    findkeyByPath, findPathByKey } from '../utils'
import {
    Outlet, Link, useLocation } from 'react-router-dom'
import {
    useNavigate } from 'react-router'

const {
    Header, Content, Sider } = Layout;


const getItems = (items: IRoute[]): MenuProps['items'] => items.map(r => ({
   
    // label: <Link to={r.key || ''}>{r.title}</Link>,
    label: r.title,
    key: r.key,
    children: r.children ? getItems(r.children) : null,
}))


const findKey = () : {
    acKeys: string[], openKeys: string[] } => {
   
    let pathname = window.location.pathname
    let currentRoute = findkeyByPath(pathname