如何让React路由在无路径参数时仍渲染同一组件？

当然有高效的实现方式！你只需要修改现有路由的path配置，把:product参数设置为可选即可，不需要额外声明新路由。

具体做法是在参数名后面加上一个问号?，这样该路径参数就变成可选的了——无论URL里有没有这个参数，路由都会匹配并渲染ProductInfoList组件。修改后的路由配置如下：

<Switch>
  <Route path="/productInfoList/:product?" component={ProductInfoList} />
</Switch>

补充说明：在组件中处理可选参数 #

在ProductInfoList组件里，你可以通过useParams()钩子来获取这个参数：

import { useParams } from 'react-router-dom';

function ProductInfoList() {
  const { product } = useParams();
  // 如果URL里没有product参数，product的值会是undefined
  // 你可以根据这个情况做相应的逻辑处理，比如展示全部产品或者默认内容
  return (
    // 组件内容
  );
}

这样改动最小，完全符合你“无需重新声明新路由”的需求，而且是React Router官方支持的标准用法哦。

内容的提问来源于stack exchange，提问作者KJ Sudarshan