使用 useRouteMatch 时从 React router dom v5 转换为 React router dom v6

Question

当涉及到从 React Router V5 迁移到 React Router V6 时，我对新语法应该是什么有疑问。

我是 V6 的新手，但在 V5 中，我在组件名称中使用了以下代码：MyComponent.js

RR V5

 const theRoute = useRouteMatch();
  const myRoutes = [
    ['Tab One', theRoute.url],
    ['Tab Two', `${theRoute.url}/details`]
 ];

V5 当前用例：

  <AppBar
      position="static"
      color="primary"
    >
      <Tabs
        value={location.pathname}
        textColor="inherit"
      >
        <Tab
          label={myRoutes[0][0]}
          value={myRoutes[0][1]}
          component={Link}
          to={myRoutes[0][1]}
        />
        <Tab
          label={myRoutes[1][0]}
          value={myRoutes[1][1]}
          component={Link}
          to={myRoutes[1][1]}
        />
      </Tabs>
    </AppBar>

    <div>
      <Switch>
        <Route path={routes[0][1]}>
          <Main />
        </Route>
        <Route path={routes[1][1]}>
          <ShowDetails />
        </Route>
      </Switch>
    </div>

在 App.js（父级别）中，我有一个调用上述 MyComponent.js 组件的路由，该组件具有嵌套路由。

<div>
  <Switch>
    <Route path="/info/:id">
      <MyComponent />
    </Route>
  </Switch>
</div>

我意识到 useRouteMatch() 在 RR V6 中不再可用，但不确定如何实现我在上面的 V5 中使用的相同结果，现在在 V6 中？

我看了useLocation()，但好像不行。

Answer 1

应用

将 Switch 组件切换为在 v6 中替换它的 Routes 组件
将 MyComponent 移动到 Route 组件的 element 属性中，作为 ReactNode、a.k.a 传递。 JSX.
在路径末尾包含一个尾随路由路径通配符 "*"，这样嵌套路由也可以被该路由匹配。

示例：

<div>
  <Routes>
    <Route path="/info/:id/*" element={<MyComponent />} />
  </Routes>
</div>

我的组件

将嵌套路由包装在 Routes 组件中，以便进行路由匹配。嵌套的 Routes 组件将构建相对于呈现它们的父路由的路径。
将路由的子组件移动到 Route 组件的 element 属性中。
我建议通过将要为每个路由呈现的组件移动到 myRoutes 配置并从数组转换为对象，并将 myRoutes 配置映射到 JSX 来使代码更干.

示例：

const myRoutes = [
  {
    name: 'Tab One',
    path: "main",
    element: <Main />,
  },
  {
    name: 'Tab Two',
    path: "details",
    element: <ShowDetails />,
  },
];

...

const { pathname } = useLocation();

// Compute the "last path segment" to use for the `Tabs` component
// `value` prop. The last path segment will match against the paths
// that are used for the `Tab` component's `value` prop.

const lastSegment = pathname.split("/").slice(-1).join();

...

<AppBar position="static" color="primary" >
  <Tabs
    value={lastSegment}
    textColor="inherit"
  >
    {myRoutes.map(({ name, path }) => (
      <Tab
        key={path}
        label={name}
        value={path}
        component={Link}
        to={path}
      />
    ))}
  </Tabs>
</AppBar>

<div>
  <Routes>
    {myRoutes.map(({ element, path }) => (
      <Route key={path} path={path} element={element} />
    ))}
  </Routes>
</div>

使用 useRouteMatch 时从 React router dom v5 转换为 React router dom v6

Convert from react router dom v5 to react router dom v6 when using useRouteMatch

reactjs

react-router-dom