react路由

1.安装

npm i react-router-dom -S

2.路由的配置

import { useRoutes } from "react-router-dom";
import Home from "../pages/Home";
import About from "../pages/About";
function RouterView() {
    const baseRoutes=[
        {path:"",element:<Home></Home>},
        {path:"/about",element:<About></About>},
    ]
    // 创建路由
  const element = useRoutes(baseRoutes)
  // 返回路由内容
    return ( 
        <>{element}</>
     );
}

export default RouterView;

3.App.js

import { HashRouter as Router,NavLink} from "react-router-dom"
import RouterView from "./router"
function App(){
   
    return (
        <Router>
            <NavLink to={{pathname:''}}>首页</NavLink> |
            <NavLink to="/about">关于</NavLink> |
            <RouterView></RouterView>
        </Router>
    )
}
export default App

4.子路由的配置

{path:"/admin/*",element:<Admin></Admin>,
            children:[
                {path:'',element:<Dash></Dash>},
                {path:'dash',element:<Dash></Dash>},
                {path:'orderlist',element:<OrderList></OrderList>},
            ]
        }

5.子路由存放

{/*Outlet存放子路由 */}
<Outlet></Outlet>