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

玥光

已于 2023-08-13 23:10:02 修改

阅读量4.1k

点赞数 4

文章标签： react.js javascript 前端 react native

于 2023-04-20 19:43:50 首次发布

本文链接：https://blog.csdn.net/qq_44754016/article/details/130252594

版权

文章讲述了在React项目中如何配置和封装路由，包括使用`npminstall`安装`react-router`相关库，创建RouteConfig.tsx文件集中管理路由，使用typescript定义路由类型，以及在App.tsx中通过遍历数组动态生成Route，实现路由懒加载。同时提到了嵌套路由的Outlet用法，以及histroy和useNavigate在路由跳转中的作用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

路由

一、配置路由

 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）
}