Vue 项目迁移 React 路由部分经验分享

更新时间：2022年09月16日 14:12:46 作者：ziolau

这篇文章主要为大家介绍了Vue 项目迁移 React 路由部分经验分享，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪

引言

最近在把 Vue2.6 的老项目代码迁移到 React，以便统一技术栈更好维护。首先遇到的难点和思维模式上的转变是：路由的迁移问题。Vue Router 迁移到 React Router，需要怎么支持嵌套的路由？

直观感觉它们之间的异同：

Vue Router：

默认使用字面量对象指定路由配置（children 属性嵌套子路由配置）;

视图上使用 <router-view/> 嵌套渲染子路由.

React Router V5:

默认使用JSX指定路由配置（也可以使用字面量对象渲染JSX达成）;

视图上使用嵌套 <Switch /> 渲染嵌套路由.

Tips: 渲染嵌套 JSX（同时传递props）可以利用 <Route/> 支持 render 属性的特性：

export function RouteWithSubRoutes(route: RoutesItem) {
  return (
    <Route
      path={route.path}
      render={(props) => (
        <route.component {...props} routes={route.routes} />
      )}
    />
  )
}

参考： v5.reactrouter.com/web/example…

然而，这样一来，我们就比较难拿到当前路由信息的 title（名称）信息。在 Vue 中我们可以使用 vm.$route 获得, 在 React 可以使用 react-helmet:

export function RouteWithSubRoutes(route: RoutesItem) {
  return (
    <Route
      path={route.path}
      render={(props) => (
        <>
					{/** Helmet 支持嵌套，嵌套越深的匹配，优先级越高 */}
          <Helmet>
            <title>{route.title}</title>
          </Helmet>
          <route.component {...props} routes={route.routes} />
        </>
      )}
    />
  )
}

可见 Vue Router 在处理嵌套路由方面，会比 React Router V5 较为便利（但是React Router更加灵活）。

升级到 React Router V6

React Router V6是个比较大的版本，在处理嵌套路由方面更加便利，它提供了一个接近 <router-view/> 功能的组件 <Outlet/>。

简单例子：

import { Routes, Route, Outlet } from "react-router-dom";
function App() {
  return (
    <Routes>
      <Route path="invoices" element={<Invoices />}>
        <Route path=":invoiceId" element={<Invoice />} />
        <Route path="sent" element={<SentInvoices />} />
      </Route>
    </Routes>
  );
}
function Invoices() {
  return (
    <div>
      <h1>Invoices</h1>
      <Outlet />
    </div>
  );
}
function Invoice() {
  let { invoiceId } = useParams();
  return <h1>Invoice {invoiceId}</h1>;
}
function SentInvoices() {
  return <h1>Sent Invoices</h1>;
}

当然，v6 也提供了直接通过字面量对象的创建路由的方法 createHashRouter ：

let routeCreater
if (props.routerMode === RouterMode.History) {
  routeCreater = createBrowserRouter
} else {
  routeCreater = createHashRouter
}
const App = <RouterProvider router={routeCreater(routes, { basename })} />
ReactDom.render(App, document.querySelector('#app'))

修改业务代码成：

const SignManagement = () => {
  return (
    <>
      <p>SignManagement</p>
      {/** Outlet 相当于 Vue 的 <router-view /> */}
      <Outlet />          
    </>
  )
}
const SignApply = () => {
  return <p>SignApply</p>
}
export const routes: RouteObject[] = [
  {
    // title: '签约管理',
    element: <SignManagement />,  // <---- component keyname变成了 element 
    path: '/guildSignConManage',
    errorElement: <p>error</p>,
    children: [
      {
        // title: '签约申请',
        element: <SignApply />,
        path: 'signApply'
      }
    ]
  }
]

升级成功：

以上就是Vue 项目迁移 React 路由部分经验分享的详细内容，更多关于Vue项目迁移React路由的资料请关注脚本之家其它相关文章！

您可能感兴趣的文章:

Vue请求后端接口导出excel表格方式
这篇文章主要介绍了Vue请求后端接口导出excel表格方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-04-04
Vue computed实现原理深入讲解
computed又被称作计算属性，用于动态的根据某个值或某些值的变化，来产生对应的变化，computed具有缓存性，当无关值变化时，不会引起computed声明值的变化。产生一个新的变量并挂载到vue实例上去
2022-10-10
vue v-for 使用问题整理小结
使用v-for指令的时候遇到一个错误问题，具体错误代码在文章给大家列出，对vue v-for使用问题感兴趣的朋友跟随小编一起学习吧
2019-08-08
Vue使用Element实现增删改查+打包的步骤
这篇文章主要介绍了Vue使用Element实现增删改查+打包的步骤，帮助大家更好的理解和学习vue框架，感兴趣的朋友可以了解下
2020-11-11
element el-tree组件的动态加载、新增、更新节点的实现
这篇文章主要介绍了element el-tree组件的动态加载、新增、更新节点的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2020-02-02
Vue实现pdf在线预览功能的示例代码
这篇文章主要为大家详细介绍了如何使用Vue实现pdf在线预览功能,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下
2025-03-03
Vue TypeScript使用eval函数遇到的问题
近几年前端对 TypeScript的呼声越来越高，Typescript也成为了前端必备的技能。TypeScript是JS类型的超集，并支持了泛型、类型、命名空间、枚举等特性，弥补了 JS 在大型应用开发中的不足
2023-01-01
vue的状态管理模式vuex
本篇文章主要介绍了深入理解vue的状态管理模式vuex，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2017-11-11
使用vue for时为什么要key【推荐】
很多朋友不明白在使用vue for时为什么要key，key的作用有哪些,在文中给大家详细介绍，需要的朋友可以参考下
2019-07-07
Vue子组件内的props对象参数配置方法
这篇文章主要介绍了 Vue 子组件内的 props 对象里的 default 参数是如何定义Array、 Object 、或 Function 默认值的正确写法说明，感兴趣的朋友跟随小编一起看看吧
2022-08-08