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 App() {
  return (<div>
    <Routes>
      <Route path="/" element={<Home />}>首页</Route>
      <Route path="/user" element={<User />}>个人中心</Route>
      <Route path="/login" element={<Login />}>登录页</Route>
      <Route path="/register" element={<Register />}>注册页</Route>
    </Routes>
  </div>);
}
export default App;

    得到的效果如下：

    在实际开发中，往往不会直接去使用Routes来构建路由，因为实际项目中的路由往往存在嵌套关系等，通常整理成一个路由模块，然后使用钩子函数useRoutes来遍历，转化成上面的Routes和Route组合结构。对应的代码如下：

二、路由跳转

    接下来说明路由如何进行交互跳转，路由交互需要借助于Navlink或者Link组件来实现，这两种组件底层都是基于a标签实现。使用方式如下：

    两种实现方式存在一个不同点，Navlink组件能够和当前地址栏中的路由进行匹配，如果能够匹配，那么Navlink会显示active，于是可以利用这一特性配置默认路由展示方式：

    因此，如果是普通导航场景（如文章内的链接、按钮跳转等），不需要根据当前路由状态改变样式则使用Link组件；如果是导航菜单、Tab 栏、面包屑等需要高亮当前选中项的场景，或者其他需要根据路由状态动态调整样式或执行逻辑则应该使用NavLink。
    另外，还可以使用函数的方式触发路由跳转，使用内置的 navigate 钩子，使用这种方式能够对路由跳转进行前置校验和拦截，比如需要登录才能访问的页面等。

function App(){
  const navigate=useNavigate();
  return (<div>
    <a onClick={()=>navigate("/")}>站点首页</a>
    <a onClick={()=>navigate("/user")}>个人中心</a>
    <a onClick={()=>navigate("/login")}>用户登录</a>
    <a onClick={()=>navigate("/register")}>用户注册</a>
   {useRoutes(routes)}
  </div>);
}

三、路由参数

    接下来分析路由如何携带参数。常用的路由携带参数有两种方式，一种是url路径携带参数，另一种是隐式传参。这里先介绍使用url路径传参方式。使用方式如下：

    在实际使用的过程中发现 console.log 被打印了两次，这是因为StrictMode 在开发环境中，React 会故意执行以下操作两次来帮助开发者发现潜在问题（如非纯函数、重复副作用等），生产环境不会重复执行：

• 组件的渲染函数
• useState 和 useReducer 的初始化逻辑
• 组件的副作用（useEffect）

    要想避免这种重复打印，可以先关闭开发环境下的严格模式：

createRoot(document.getElementById('root')!).render(
  // <StrictMode>
    <BrowserRouter>
      <App />
    </BrowserRouter>
  // </StrictMode>
);

    还有一种传参方式，当需要传递的参数数量比较多或者参数的种类不确定时，可以使用 search 类型参数，对于search类型参数，不需要去重新配置详细的url路由参数，在获取的时候借助于内置的useSearchParams来获取参数即可。

    需要注意的是还可以利用setSearch修改参数，这时的参数等价于使用了state来维护，具体使用方式如下：

function User() {
    const [search, setSearch] = useSearchParams();
    const userId = search.get("id");
    const type = search.get("type");
    setSearch((prev) => {
        prev.delete('name'); // 删除参数
        prev.set('gender', '男'); // 添加或更新参数
        return prev;
    });
    const gender = search.get('gender');
    console.log("输出search参数：", userId, type, gender);
    return (
        <div>
            个人中心
        </div>
    );
}

四、路由嵌套

    在实际使用过程中往往会出现多级路由，比如后端管理系统，左侧和中间的面包屑都属于多级路由。对于多级路由的处理，react-router中也有相关的函数来处理。配置多级嵌套路由的方式和Vue中的多级路由比较相似：

    需要注意的是这里的多级路由子级不能添加 “/” 前缀，也就是不能写成 “/picture” 或者 “/files”，为了方便展示效果，这里使用Navlink组件并添加对应于active的样式：

    补充说明，这里的 Outlet 组件，能够让子代路由的内容嵌入到父代路由中，最终得到的效果如下：

    最后，在多级嵌套的时候，发现当路径中携带参数比较多的时候，使用useSearchParams()会更方便一些，如果使用的是路径参数，需要注意对于子代路由页面中的url部分不会被识别为父代路由的参数。比如这里user页面有files和picture两个子页面，如果使用路径参数，比如user/:id，那么子代路由接入之后会将user/files中的files部分识别为id参数的值。而使用useSearchParams()不存在这个问题，参数更加清晰，就是每次需要手动处理路径中的参数。