react路由

1：首先安装

安装可以指定版本，我安装的是6版本的

2：配置路由

在src路径下创建router/index.js文件配置路由

const baseRoutes = [
    {
      path: "",
      element: <Home></Home>,
    },
    {
      path: "/about",
      element: <About></About>,
    },
    {
        path: "/produce/:id",
        element: <Produce></Produce>,
      },
      {
        path:"/admin/*",// /*最好加上，防止后期动态路由出现错误
        element：<Admin/>,
          children:[
            {path:'',element:<Dash/>}
            ]
      }
  ];

子路由配置：

这里以admin为例

 {
            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;

App.js包装

// 导入hash路由 as起别名 hash路由设为Router
import  {HashRouter as Router,NavLink} from "react-router-dom";
//导入创建好的路由
import RouterView from "./router";
<Router>
      <RouterView></RouterView>
  </Router>

目录结构：

组件

HashRouter哈希路由（所有的路由组件和方法必须包裹在这个路由里面）

NavLink 导航链接（选中多个action）to="/about" to={{pathname:"/about"}}

Link导航链接 没有active类，NavLink有active类

Outlet子路由容器

use方法

useRoutes创建路由

useParams 获取路由参数

效果图