您现在的位置是：网站首页> 编程资料编程资料

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

2023-05-24 396人已围观

简介 Vue 项目迁移 React 路由部分经验分享_vue.js_

引言

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

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

Vue Router：

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

视图上使用嵌套渲染子路由.

React Router V5:

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

视图上使用嵌套渲染嵌套路由.

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

export function RouteWithSubRoutes(route: RoutesItem) { return (  (  )} /> ) }

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

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

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

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

升级到 React Router V6

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

简单例子：

import { Routes, Route, Outlet } from "react-router-dom"; function App() { return ( }>} />} /> ); } function Invoices() { return ( Invoices
 ); } function Invoice() { let { invoiceId } = useParams(); return Invoice {invoiceId}
; } function SentInvoices() { return Sent Invoices
; }

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

let routeCreater if (props.routerMode === RouterMode.History) { routeCreater = createBrowserRouter } else { routeCreater = createHashRouter } const App =  ReactDom.render(App, document.querySelector('#app'))

修改业务代码成：

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

升级成功：