首先是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;