react路由使用方法

    无论是小程序端、web端还是移动端前端开发都需要使用到路由组件，学会了路由之后便可以灵活开发各种交互页面。可以说路由在前端开发中占有非常重要的位置。在React中，路由使用方式和Vue比较相似，同样存在封装都较高的依赖，接下来逐步展开React的路由使用方式。

一、router安装与基础路由

    react中使用路由，需要安装如下库：
（1）react-router：路由核心组件，用于实现单页面应用（SPA）的路由功能；
（2）react-router-dom：专门为浏览器环境设计的库，提供了构建单页面应用（SPA）所需的核心路由功能；
（3）react-router-native：专门为 React Native 应用设计的路由库，它基于 React Router 的核心概念，提供了在移动应用中实现导航功能的解决方案。
    接下来以浏览器为例介绍基础使用方法，首先需要使用BrowserRouter包裹App组件，表示使用 BrowserRouter 作为路由容器，另外还有一种HashRouter ，对应于browse和hash两种路由方式，在vue中也有。

import { BrowserRouter, HashRouter } from 'react-router-dom';createRoot(document.getElementById('root')!).render(<StrictMode><BrowserRouter><App /></BrowserRouter></StrictMode>
);

    然后利用Routes和Route构建基础路由：

import { Routes, Route, useRoutes } from "react-router-dom";
import routes from "./router/index.jsx";
import Home from "./pages/Home/index.jsx";
import User from "./pages/User/index.jsx";
import Login from "./pages/Login/index.jsx";
import Register from "./pages/Register/index.jsx";
function