react路由

1.安装

建议安装v6

安装命令 npm i react-router-dom -S

2.路由配置

在router文件夹的index.js中配置

import { useEffect,useState } from "react";
import { useRoutes } from "react-router-dom";
//导入需要的page
import About from "../pages/About";
import Home from "../pages/home";
import Produce from "../pages/Produce";
import Admin from '../pages/admin/Admin'
import Dash from '../pages/admin/Dash'
import OrderList from '../pages/admin/OrderList'
function RouterView() {
    //路由基本配置
    const baseRoutes= [
        {path:"",element:<Home></Home>},
        {path:"/about",element:<About></About>},
        {path:"/produce/:id",element:<Produce></Produce>},
        {path:"/admin",element:<Admin></Admin>,
        children:[
            {path:'',element:<Dash></Dash>},
            {path:'dash',element:<Dash></Dash>},
            {path:'orderlist',element:<OrderList></OrderList>},
        ]
    }
    ]
    //创建路由
    const element = useRoutes(baseRoutes)
   //返回路由内容
   return ( <>
    {element}
    </> );
}

export default RouterView;

3.App.js包装

//as 起个别名
import { HashRouter as Router,NavLink } from "react-router-dom";
import RouterView from "./router";
//app 
function App() {
  return ( <Router>
    <NavLink to="">首页</NavLink>|
    <NavLink to={{pathname:"/about"}}>关于</NavLink>|
    <NavLink to="/produce/abc">产品abc</NavLink>|
    <NavLink to="/produce/123">产品123</NavLink>
    <RouterView></RouterView>
  </Router> );
}

export default App;

4.组件

HashRouter 哈希路由

NavLink 导航链接 两种连接方式 ：

<NavLink to="">首页</NavLink>

<NavLink to={{pathname:"/about"}}>关于</NavLink>

5.use方法

useRoutes创建路由

useParams获取路由参数