快捷導(dǎo)航

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

更新時(shí)間：2022年09月16日 14:12:46 作者：ziolau

這篇文章主要為大家介紹了Vue 項(xiàng)目遷移 React 路由部分經(jīng)驗(yàn)分享，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jì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í)成功：