react路由的使用

安装

npm install react-router-dom

main.tsx中配置

import React from 'react'
import { RouterProvider } from 'react-router-dom'
import ReactDOM from 'react-dom/client'
import App from './App.tsx'
import 'normalize.css'
import './index.css'
 
import router from './router/index.ts'
 
ReactDOM.createRoot(document.getElementById('root')!).render(
  <React.StrictMode>
    <RouterProvider router={ router } >
        <App />
    RouterProvider>
  React.StrictMode>,
)

 router文件夹下index.ts路由表配置

import { createBrowserRouter } from "react-router-dom";
import Layout from "@/pages/layout/Layout";
import Login from "@/pages/login/Login";
import Home from "@/pages/home/Home";
 
 
import type { Routes } from '@/types/router'
 
const routes:Array<Routes> = [
    {
        path:'/',
        //注意：这里C要大写
        Component:Layout,
        children:[
            //react-router路由表配置没有redirect重定向，故此在这里多加一项Home配置，同样能达 
            //到重定向效果
            {
                path:'/',
                Component:Home
            },
            {
                path:'/home',
                Component:Home
            }
        ]
    },
    {
        path:'/login',
        Component:Login
    }
]
 
const router = createBrowserRouter(routes)
 
 
 
export default router

App组件中使用

import { Outlet } from 'react-router-dom'
import "./App.less";
 
function App() {
 
  return (
    <div className="app">  
       <Outlet />
    div>
  );
}
 
export default App;

获取路由路径 useLocation

编程式导航   useNavigate

获取路由参数  useParams