React使用useRoutes配置路由集中管理

1. 安装React路由插件

npm install react-router-dom

2. 在src目录下创建router文件夹并创建index.js文件
3. 在创建的index.js文件中引入所需文件

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

4. 代码展示

// 引入所需的依赖文件
import * as React from "react";
import { useRoutes } from 'react-router-dom'
// 引入所需要路由的页面
import Tabbar from '../views/Tabbar'
import Home from '../views/Home'
import Login from '../views/Login'
export default function Index() {
    const element = useRoutes(
        [
            {
                path: '/',
                element: <Tabbar></Tabbar>,
            },
            {
                path: 'Login',
                element: <Login />,
            }
        ]
    )
    return element
}

5. 创建子路由，搭配<Outlet></Outlet>使用相当于Vue中的<router-view></router-view>

import * as React from "react";
import { useRoutes } from 'react-router-dom'
import Tabbar from '../views/Tabbar'
import Home from '../views/Home'
import Login from '../views/Login'
export default function Index() {
    const element = useRoutes(
        [
            {
                path: '/',
                element: <Tabbar></Tabbar>,
                // 向Vue一样创建children放置页面
                children: [
                    {
                        path: 'Home',
                        element: <Home />,
                    },
                ],
            },
            {
                path: 'Login',
                element: <Login />,
            }
        ]
    )
    return element
}

6. 在入口文件中引入刚创建好的router文件

import React from "react";
import ReactDOM from "react-dom/client";
import './index.scss'
import './assets/icon.css'
// 使用hash路由
import { BrowserRouter } from "react-router-dom";
import BaseRouter from "./router";
ReactDOM.createRoot(document.getElementById("root")).render(
  <React.StrictMode>
    <BrowserRouter>
      <BaseRouter></BaseRouter>
    </BrowserRouter>
  </React.StrictMode>
);