Vue 项目迁移 React 路由部分经验分享 | 您所在的位置:网站首页 › vue项目迁移react › Vue 项目迁移 React 路由部分经验分享 |
目录引言Vue Router:React Router V5:升级到 React Router V6引言
最近在把 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 V6React 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 = () => { returnSignApply } export const routes: RouteObject[] = [ { // title: '签约管理', element: , // |
CopyRight 2018-2019 实验室设备网 版权所有 |