欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

Vue 項目遷移 React 路由部分經(jīng)驗分享

 更新時間:2022年09月16日 14:12:46   作者:ziolau  
這篇文章主要為大家介紹了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)文章

  • Vue動態(tài)樣式方法實例總結(jié)

    Vue動態(tài)樣式方法實例總結(jié)

    在vue項目中,很多場景要求我們動態(tài)改變元素的樣式,下面這篇文章主要給大家介紹了關(guān)于Vue動態(tài)樣式方法的相關(guān)資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下
    2023-02-02
  • vue過濾器用法實例分析

    vue過濾器用法實例分析

    這篇文章主要介紹了vue過濾器用法,結(jié)合實例形式總結(jié)分析了vue.js常見過濾器相關(guān)使用技巧與操作注意事項,需要的朋友可以參考下
    2019-03-03
  • vue3封裝自定義v-model的hooks示例詳解

    vue3封裝自定義v-model的hooks示例詳解

    這篇文章主要為大家介紹了vue3封裝自定義v-model的hooks示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪
    2022-07-07
  • Vue Cli3 創(chuàng)建項目的方法步驟

    Vue Cli3 創(chuàng)建項目的方法步驟

    Vue CLI是一個用于快速Vue.js開發(fā)的完整系統(tǒng)。這篇文章主要介紹了Vue Cli3 創(chuàng)建項目的方法步驟,非常具有實用價值,需要的朋友可以參考下
    2018-10-10
  • VUE實現(xiàn)自身整體組件銷毀的示例代碼

    VUE實現(xiàn)自身整體組件銷毀的示例代碼

    這篇文章主要介紹了VUE實現(xiàn)自身整體組件銷毀的示例代碼,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧
    2020-01-01
  • 詳解webpack + vue + node 打造單頁面(入門篇)

    詳解webpack + vue + node 打造單頁面(入門篇)

    本篇文章主要介紹了詳解webpack + vue + node 打造單頁面(入門篇) ,非常具有實用價值,需要的朋友可以參考下
    2017-09-09
  • Vue-cli3項目引入Typescript的實現(xiàn)方法

    Vue-cli3項目引入Typescript的實現(xiàn)方法

    這篇文章主要介紹了Vue-cli3項目引入Typescript的實現(xiàn)方法,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧
    2019-10-10
  • vue里面的el-select綁定默認值方式

    vue里面的el-select綁定默認值方式

    這篇文章主要介紹了vue里面的el-select綁定默認值方式,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教
    2022-09-09
  • 在vue2中實現(xiàn)截圖功能的基本步驟

    在vue2中實現(xiàn)截圖功能的基本步驟

    在Vue 2中實現(xiàn)截圖功能,可以使用HTML5的Canvas元素和一些JavaScript代碼來捕獲屏幕或特定元素的截圖,以下是一個簡單的步驟和示例代碼來實現(xiàn)這個功能,需要的朋友可以參考下
    2023-10-10
  • 淺析vue中$nextTick的作用與原理

    淺析vue中$nextTick的作用與原理

    這篇文章主要為大家詳細介紹一下Vue中$nextTick的作用于原理,這也是面試中常??嫉降膯栴},文中的示例代碼講解詳細,對我們深入了解Vue有一定的幫助,需要的小伙伴可以參考一下
    2023-10-10

最新評論