React router6路由封装

首先是route的封装

用的是router6版本

src/route/index.tsx

import type { RouteObject } from 'react-router-dom'
import BaseLayout from '../layout/BaseLayout'
import About from '../pages/About'
import Home from '../pages/Home'
import AboutIndex from '../pages/About/Component/AboutIndex'
import AboutList from '../pages/About/Component/AboutList'
import Bussiness from '../pages/Bussiness'


const routes : RouteObject[] = [
    {
        path: "/",
        element: <BaseLayout/>, 
        children: [
            {
                index : true,
                element: <Home />
            },
            {
                path: "/about",
                element: <About />,
                children: [
                    { index : true, element: <AboutIndex />},
                    { path : "/about/:id", element :<AboutList />}
                ]
            },
            {
                path: "/bussiness",
                element: <Bussiness />,
            }
        ]
    },
    {
        path: "/sso",
        element: <div>1</div>
    }
]

export default routes

src/index.tsx

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
import { HashRouter } from 'react-router-dom';


ReactDOM.render(
  <React.StrictMode>
    <HashRouter>
      <App />
    </HashRouter>
  </React.StrictMode>,
  document.getElementById('root')
);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();

``

src/App.tsx

import React from 'react';
import './App.css';
import { useRoutes } from 'react-router';
import routes from './route';

function App() {
  return (
    <div className="App">
      {useRoutes(routes)}
    </div>
  );
}

export default App;