Vue 項目遷移 React 路由部分經(jīng)驗分享
引言
最近在把 Vue2.6 的老項目代碼遷移到 React,以便統(tǒng)一技術(shù)棧更好維護。 首先遇到的難點和思維模式上的轉(zhuǎn)變是:路由的遷移問題。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 支持嵌套,嵌套越深的匹配,優(yōu)先級越高 */} <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 也提供了直接通過字面量對象的創(chuàng)建路由的方法 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'))
修改業(yè)務(wù)代碼成:
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 路由部分經(jīng)驗分享的詳細內(nèi)容,更多關(guān)于Vue項目遷移React路由的資料請關(guān)注腳本之家其它相關(guān)文章!
相關(guān)文章
詳解webpack + vue + node 打造單頁面(入門篇)
本篇文章主要介紹了詳解webpack + vue + node 打造單頁面(入門篇) ,非常具有實用價值,需要的朋友可以參考下2017-09-09Vue-cli3項目引入Typescript的實現(xiàn)方法
這篇文章主要介紹了Vue-cli3項目引入Typescript的實現(xiàn)方法,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧2019-10-10