react配置路由的两种方式【组件】和【对象】

本文基于react18 & react-router 6 版本

组件路由

main.jsx

import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App'
import './index.scss'
import 'antd/dist/reset.css';
import { BrowserRouter } from 'react-router-dom';
import BaseRouter from './router/index';

const root = ReactDOM.createRoot(document.getElementById('root'))
root.render(
  <React.StrictMode>
    <BrowserRouter>
      <App />
    </BrowserRouter>
  </React.StrictMode >
)

App.jsx ，不用写Outlet也可以正常渲染

   <Routes>
                <Route path="/" element={<Navigate to={`/login`}></Navigate>}></Route>
                <Route path="/home" element={<Home />}>
                    <Route path="user" element={<User />}></Route>
                    <Route path="artcle" element={<Artcle />}>
                        <Route path=":artcleId" element={<Details />} />
                    </Route>
                </Route>
                <Route path="/login" element={<Login />}></Route>
                <Route path="/*" element={<NotFount />} />
            </Routes>

对象路由

router.ts

import Home from "@/pages/Home"
import {
    
     Navigate, RouteObject } from 'react-router-dom';
import Login from '@/pages/Login';
import User from "@/pages/Home/User";
import Artcle from "@/pages/Home/Artcle";
import Details from "@/pages/Home/Artcle/Details";
const routes: RouteObject[] = [
    {
    
    
        path: '/',
        element: <Navigate to={
    
    '/login'} />,
    },
    {
    
    
        path: '/home',
        element: <Home />,
        children: [
            {
    
    
                path: 'user',
                element: <User />
            },
            {
    
    
                path: 'artcle',
                element: <Artcle />,
                children: [
                    {
    
    
                        path: ':id',
                        element: <Details />
                    }
                ]
            }
        ]
    },
    {
    
    
        path: '/login',
        element: <Login />
    }

]
export default routes

App.jsx

import React from "react";
import {
    
    
  Outlet, useRoutes,
} from "react-router-dom";
import routes from "./router";
const App: React.FC = () => {
    
    
  const router = useRoutes(routes)
  return (
    <React.Fragment>
      {
    
    router}
    </React.Fragment>
  );
};
export default App;

对象路由的比较规范的方式

routers.tsx

import Login from '@/pages/Login';
import {
    
     createBrowserRouter } from 'react-router-dom';
const routers = createBrowserRouter([

    {
    
    
        path: '/',
        element: <Navigate to={
    
    '/login'} />,
    },
     {
    
    
        path: '/login',
        element: <Login />
    },
])

App.tsx

import React, {
    
     lazy, Suspense, useEffect } from "react";
import {
    
     Breadcrumb, Button, ConfigProvider, FloatButton, theme } from "antd";
import {
    
     Outlet, useRoutes, Navigate, useNavigate, RouterProvider, createBrowserRouter } from "react-router-dom";
import {
    
     CustomerServiceOutlined, CommentOutlined } from "@ant-design/icons";
import routers from './router/index';

const App: React.FC = () => {
    
    
  return (
    <React.Fragment>
      <ConfigProvider
        theme={
    
    {
    
    
          token: {
    
    
            colorBgContainer: "#fffff",
            colorPrimary: "#1677FF",
          },
          components: {
    
    
            Radio: {
    
    
              colorPrimary: "#00b96b",
            },
            Checkbox: {
    
    
              colorPrimary: "#9E339F",
            },
            Button: {
    
    
              borderRadius: 20,
            },
          },
          // algorithm: theme.darkAlgorithm,
          // algorithm: theme.defaultAlgorithm,
        }}
      >
        <FloatButton.Group
          icon={
    
    <CustomerServiceOutlined />}
          type="primary"
          trigger="click"
        >
          <FloatButton />
          <FloatButton icon={
    
    <CommentOutlined />} />
        </FloatButton.Group>
      </ConfigProvider>
      {
    
    /* 路由提供 */}
      <RouterProvider router={
    
    routers} fallbackElement={
    
    <>error</>}></RouterProvider>
    </React.Fragment>
  );
};
export default App;

main.jsx

import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App'
import './index.scss'
import 'antd/dist/reset.css';
import {
    
     BrowserRouter } from 'react-router-dom';
import BaseRouter from './router/index';

const root = ReactDOM.createRoot(document.getElementById('root'))
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode >
)