时间戳

首页 > 解决方案 > React Router：如何有条件地渲染具有相同路由的不同组件

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

问题描述

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

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

/products/:category当路径是slug 是字符串时，我想渲染 List 组件。:productId当它的 slug是一个整数时，我还想使用相同的路径来呈现 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} />
)}

谢谢！

标签： reactjsreact-routerreact-hooksreact-router-dom

解决方案

您可以使用 Route 的渲染道具来验证参数。

<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} />
      }
    }}
/>

推荐阅读