Question

如何使用 React 路由器渲染具有相同路由路径的不同组件，但 slug 输入类型不同（int 与 string）？

<Switch>
    <Route exact path={['/music/:category', '/products/:category']} component={List} />
    <Route exact path="/products/:productId" component={Details} />
</Switch

当 slug 是字符串时，我想在路径为 /products/:category 时呈现 List 组件。当 slug :productId 是整数时，我还想使用相同的路径来呈现 Details 组件。

我在想这可能有用，但它没有。无论是否满足条件，这都会呈现 Details 组件。

{pathname.includes('/products') && typeof parseInt(pathname.split('/products/')[1]) === 'number'
  ? (
    <Route exact path="/products/:id" component={Details} />
  ) : (
    <Route exact path={['/music/:slug', '/products/:slug']} component={List} />
)}

谢谢！

Answer 1

您可以利用Route的render props来验证参数。

<Route
    path="/products/:id"
    render={({ match: { params: { id } } }) => {
      if(isNaN(id) {
        <Route exact path={['/music/:slug', '/products/:slug']} component={List} />
      } else {
        <Route exact path="/products/:id" component={Details} />
      }
    }}
/>

React Router：如何有条件地渲染具有相同路由的不同组件

1 个答案: