javascript - 从 React 模板制作嵌套路由时难以使用 useRouteMatch

Question

所以我在玩一个名为 CORE UI 的 React UI 模板。我已经定制了侧导航，链接将我引导到我的自定义页面。我遇到的问题是弄清楚如何匹配URL 以使我的嵌套路由动态化。

据我了解，路由是在“routes.js”组件的 JS 对象中建立的，如下所示（不要介意重复性）：

import React from 'react';



const Mortgage = React.lazy(() => import('./views/initial/mortgage/Mortgage'));
const Opening = React.lazy(() => import('./views/initial/opening/Opening'));
const Property = React.lazy(() => import('./views/initial/property/Property'));
const Purchasers = React.lazy(() => import('./views/initial/purchasers/Purchasers'));
const Summary = React.lazy(() => import('./views/initial/summary/Summary'));
const Vendors = React.lazy(() => import('./views/initial/vendors/Vendors'));
const Teranet = React.lazy(() => import('./views/initial/teranet/Teranet'));
const Compliance = React.lazy(() => import('./views/initial/compliance/Compliance'));

const Res2req = React.lazy(() => import('./views/closing/res2req/Res2req'));
const Tasks = React.lazy(() => import('./views/closing/tasks/Tasks'));
const Undertakings = React.lazy(() => import('./views/closing/undertakings/Undertakings'));
const Fire = React.lazy(() => import('./views/closing/fire/Fire'));
const Title = React.lazy(() => import('./views/closing/title/Title'));
const Consideration = React.lazy(() => import('./views/closing/consideration/Consideration'));
const Account = React.lazy(() => import('./views/closing/account/Account'));
const Adjustments = React.lazy(() => import('./views/closing/adjustments/Adjustments'));
const Ledger = React.lazy(() => import('./views/closing/ledger/Ledger'));
const Affidavits = React.lazy(() => import('./views/closing/affidavits/Affidavits'));
const Report = React.lazy(() => import('./views/closing/report/Report'));

const ProDocs = React.lazy(() => import('./views/documents/proDocs/ProDocs'));
const FoldDocs = React.lazy(() => import('./views/documents/foldDocs/FoldDocs'));
const Forms = React.lazy(() => import('./views/documents/forms/Forms'));


const Memos = React.lazy(() => import('./views/others/memos/Memos'));



const routes = [
  { path: '/:id/purchase', exact: true, name: 'Home' },


  { path: '/initial', name: 'Initial', component: Summary, exact: true },
  { path: '/initial/summary', name: 'Summary', component: Summary },
  { path: '/initial/opening', name: 'File Opening', component: Opening },
  { path: '/initial/vendors', name: "Vendor's Party", component: Vendors },
  { path: '/initial/purchasers', name: "Purchaser's Party", component: Purchasers },
  { path: '/initial/property', name: 'Property', component: Property },
  { path: '/initial/teranet', name: 'Teranet', component: Teranet },
  { path: '/initial/mortgage', name: 'Mortgage', component: Mortgage },
  { path: '/initial/compliance', name: 'Compliance Letters', component: Compliance },

  { path: '/closing', name: 'Closing', component: Res2req, exact: true },
  { path: '/closing/res2req', name: 'Response to Requisitions', component: Res2req },
  { path: '/closing/undertakings', name: 'Undertakings Received', component: Undertakings },
  { path: '/closing/tasks', name: 'Supplemental Tasks', component: Tasks },
  { path: '/closing/fire', name: 'Fire Insurance', component: Fire },
  { path: '/closing/title', name: 'Title Insurance', component: Title },
  { path: '/closing/consideration', name: 'Consideration', component: Consideration },
  { path: '/closing/adjustments', name: 'Statement of Adjustments', component: Adjustments },
  { path: '/closing/account', name: 'Statement of Account', component: Account },
  { path: '/closing/ledger', name: 'Trust Ledger', component: Ledger },
  { path: '/closing/affidavits', name: 'Executions Affidavits', component: Affidavits },
  { path: '/closing/report', name: 'Report to Purchaser', component: Report },

  { path: '/docs', name: 'Documents', component: ProDocs, exact: true },
  { path: '/docs/proDocs', name: 'Document Production', component: ProDocs},
  { path: '/docs/foldDocs', name: 'Document folder', component: FoldDocs },
  { path: '/docs/forms', name: 'Forms List', component: Forms },

  { path: '/memo', name: 'Memo', component: Memos },

  ];


export default routes;

由于下面的“TheContent.js”文件，这些对象能够形成路由并渲染相应的组件：

import React, { Suspense } from 'react'
import {
  Route,
  Switch
} from 'react-router-dom'
import { CContainer, CFade } from '@coreui/react'

// routes config
import routes from '../routes'

const loading = (
  <div className="pt-3 text-center">
    <div className="sk-spinner sk-spinner-pulse"></div>
  </div>
)

const TheContent = () => {
  return (
    <main className="c-main">
      <CContainer fluid>
        <Suspense fallback={loading}>
          <Switch>
            {routes.map((route, idx) => {
              return route.component && (
                <Route
                  key={idx}
                  path={route.path}
                  exact={route.exact}
                  name={route.name}
                  render={props => (
                    <CFade>
                      <route.component {...props} />
                    </CFade>
                  )} />
              )
            })}

          </Switch>
        </Suspense>
      </CContainer>
    </main>
  )
}

export default React.memo(TheContent)

正是这段代码使来自“routes.js”中 JS 对象的 {key:value} 对能够实际路由应用程序：

<Switch>
            {routes.map((route, idx) => {
              return route.component && (
                <Route
                  key={idx}
                  path={route.path}
                  exact={route.exact}
                  name={route.name}
                  render={props => (
                    <CFade>
                      <route.component {...props} />
                    </CFade>
                  )} />
              )
            })}

          </Switch>

所以我的问题是，如何从“routes.js”中的路由中创建动态路由，类似于使用 {useRouteMatch}。不幸的是，当我尝试在对象内部使用该函数时收到错误消息。也许解决方案在于“TheContent.js”中的一小段代码。

如果有任何机构可以提供帮助，那就太棒了。如果您需要我提供更多信息，请告诉我。

标签： javascriptreactjsurlroutesmatch