最近在把 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} />)}/>)
}
参考: