react+ts+vite项目 路由的搭建 （route v6）

路由

一、配置路由

 npm install --save react-router react-router-dom

eg: 安装完成后会在package.json中出现安装包信息

二、封装路由

react中， 路由路径是由Routes 、 Route 搭配包裹生成的， 这就会出现下面的现象：

一层嵌套一层， 若页面多的话维护起来比较麻烦，所以需要自行处理一下。
1、 在src下建route文件夹下建RouteConfig.tsx 文件， 用来配置路由路径和组件， 变成下面这样

标红是ts报的错，没有给定类型，新建model.d.ts声明文件，用来定义路由的类型：

声明文件中定义一个命名空间，用来存放跟路由相关的接口。
接下来在RouteConfig.tsx文件中使用这个类型， 解决ts的报错：

需要注意， 路由最好使用懒加载，节省效率， 所以对以上代码改造一下，最终呈现如下

类型改为

2、 在app.tsx 文件中改造一下html结构， 本质上就是利用数组循环出Route，简化书写嵌套Route， 增减路由只需维护RouteConfig文件里的配置内容即可。

代码贴在这里

import { Suspense } from 'react';
import { BrowserRouter, Routes, Route } from 'react-router-dom';
import router from './route/RouteConfig';

function App() {
  // 由于路由组件是懒加载的，渲染页面可能会有延迟，使用Suspense 可优化交互
  const RouteEleMent = (route: IRouteType.IRouer): React.ReactNode => {
    if (!route.element) {
      return null;
    }
    return (
      <Suspense fallback={<div> Loading...</div>}>
        <route.element />
      </Suspense>
    );
  };
  // 通过每个路由对象渲染Route
  const RouteItem = (route: IRouteType.IRouer) => {
    return (
      <Route key={route.name} element={RouteEleMent(route)} path={route.path}>
        {RouteList(route.chileren ?? [])}
      </Route>
    );
  };
  // 根据配置的routeconfig 生成Route
  const RouteList = (list: IRouteType.IRouer[]) => {
    return list.map((item) => RouteItem(item));
  };

  return (
    <BrowserRouter>
      <div className="App">
        <Routes>
          {/* <Route element={Dashboard()} path="/">
            <Route element={MenuLeft()} path="menu"></Route>
          </Route>
          <Route element={Profile()} path="/profile"></Route> */}
          {RouteList(router)}
        </Routes>
      </div>
    </BrowserRouter>
  );
}

export default App;

关于 Outlet

嵌套路由用来占位的， 例如后台管理系统中，左侧是菜单，右侧区域用来切换页面， 这个时候就会用到 标签， 使页面渲染到正确的位置
例：

关于history

用来操作浏览器历史栈， 主要是可以用来封装路由前置守卫和后置守卫， vue有自己的路由守卫钩子， react是需要依赖history自己封装的， 关于路由守卫的封装另开一篇讲解。
https://juejin.cn/post/7065599937265795109
悄咪咪放个链接，讲history的，不了解的可以看看~

路由跳转 useNavigate

route v6对路由跳转做了优化，为我们提供了新的钩子 useNavigate
使用方法

import { useNavigate } from 'react-router-dom'

function App(){
	const navigate = useNavigate();
    //跳转
    navigate('/home');
    // 传参
    navigate('/home', {state: {name: 'zhangsan'}})
    //后退
    navigate(-2）
}

代码仓库

https://gitee.com/liuyue82/react_-ts_-vite.git