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

最新推荐文章于 2024-06-18 13:58:34 发布

梅花十三儿

最新推荐文章于 2024-06-18 13:58:34 发布

阅读量611

点赞数

文章标签： vue.js react.js javascript

本文链接：https://blog.csdn.net/Android062005/article/details/127122109

版权

本文分享了从 Vue2.6 项目迁移至 React 的过程中，关于路由部分的经验。对比了 Vue Router 和 React Router V5/V6 的异同，强调了 Vue Router 在嵌套路由处理上的便利性，而 React Router 则更灵活。提到了在 React Router V6 中处理嵌套路由的改进，并提供了升级示例。

摘要由CSDN通过智能技术生成

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

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

Vue Router：

1.默认使用字面量对象指定路由配置（children 属性嵌套子路由配置）;
2.视图上使用 <router-view/> 嵌套渲染子路由.

React Router V5:

1.默认使用JSX指定路由配置（也可以使用字面量对象渲染JSX达成）;
2.视图上使用嵌套 <Switch /> 渲染嵌套路由.

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

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

参考：