Vue 項(xiàng)目遷移 React 路由部分經(jīng)驗(yàn)分享
引言
最近在把 Vue2.6 的老項(xiàng)目代碼遷移到 React,以便統(tǒng)一技術(shù)棧更好維護(hù)。 首先遇到的難點(diǎn)和思維模式上的轉(zhuǎn)變是:路由的遷移問題。Vue Router 遷移到 React Router,需要怎么支持嵌套的路由?
直觀感覺它們之間的異同:
Vue Router:
默認(rèn)使用字面量對(duì)象指定路由配置(children 屬性嵌套子路由配置);
視圖上使用 <router-view/>
嵌套渲染子路由.
React Router V5:
默認(rèn)使用JSX指定路由配置(也可以使用字面量對(duì)象渲染JSX達(dá)成);
視圖上使用嵌套 <Switch />
渲染嵌套路由.
Tips: 渲染嵌套 JSX(同時(shí)傳遞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…
然而,這樣一來,我們就比較難拿到當(dāng)前路由信息的 title(名稱) 信息。在 Vue 中我們可以使用 vm.$route
獲得, 在 React 可以使用 react-helmet:
export function RouteWithSubRoutes(route: RoutesItem) { return ( <Route path={route.path} render={(props) => ( <> {/** Helmet 支持嵌套,嵌套越深的匹配,優(yōu)先級(jí)越高 */} <Helmet> <title>{route.title}</title> </Helmet> <route.component {...props} routes={route.routes} /> </> )} /> ) }
可見 Vue Router 在處理嵌套路由方面,會(huì)比 React Router V5 較為便利(但是React Router更加靈活)。
升級(jí)到 React Router V6
React Router V6是個(gè)比較大的版本,在處理嵌套路由方面更加便利,它提供了一個(gè)接近 <router-view/>
功能的組件 <Outlet/>
。
簡(jiǎn)單例子:
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>; }
當(dāng)然,v6 也提供了直接通過字面量對(duì)象的創(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 相當(dāng)于 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: '簽約申請(qǐng)', element: <SignApply />, path: 'signApply' } ] } ]
升級(jí)成功:
以上就是Vue 項(xiàng)目遷移 React 路由部分經(jīng)驗(yàn)分享的詳細(xì)內(nèi)容,更多關(guān)于Vue項(xiàng)目遷移React路由的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章!
相關(guān)文章
Vue動(dòng)態(tài)樣式方法實(shí)例總結(jié)
在vue項(xiàng)目中,很多場(chǎng)景要求我們動(dòng)態(tài)改變?cè)氐臉邮?下面這篇文章主要給大家介紹了關(guān)于Vue動(dòng)態(tài)樣式方法的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-02-02Vue Cli3 創(chuàng)建項(xiàng)目的方法步驟
Vue CLI是一個(gè)用于快速Vue.js開發(fā)的完整系統(tǒng)。這篇文章主要介紹了Vue Cli3 創(chuàng)建項(xiàng)目的方法步驟,非常具有實(shí)用價(jià)值,需要的朋友可以參考下2018-10-10詳解webpack + vue + node 打造單頁面(入門篇)
本篇文章主要介紹了詳解webpack + vue + node 打造單頁面(入門篇) ,非常具有實(shí)用價(jià)值,需要的朋友可以參考下2017-09-09Vue-cli3項(xiàng)目引入Typescript的實(shí)現(xiàn)方法
這篇文章主要介紹了Vue-cli3項(xiàng)目引入Typescript的實(shí)現(xiàn)方法,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-10-10