React Router添加注册路由后ProductScreen页面图片undefined问题求助

react-router-dom v5版本的<Switch>组件遵循从上到下的前缀匹配规则：只要命中第一个路径匹配的路由，就会停止后续匹配，直接渲染对应组件。

你当前的路由顺序存在逻辑冲突：

<Switch>
  <Route path='/products' component={ProductsScreen} />
  <Route path='/:id' component={ProductScreen} />
  <Route path='/register' component={RegisterScreen} />
</Switch>

其中/:id是无前缀的动态路由，可以匹配任意第一层路径：

1. 当你新增/register路由后，访问注册路径时会先命中/:id规则，将字符串register作为id参数传入ProductScreen
2. ProductScreen中执行allProducts.find(x => x._id === Number(props.match.params.id))时，Number('register')会得到NaN，无法匹配到allProducts中的任何数据，product变量为undefined，访问product.image等属性就会抛出错误
3. 当你删掉/:id路由后，访问/register就能正常命中注册路由，所以页面可以正常渲染

方案1：调整路由顺序（快速修复） #

把所有固定路径的路由放在动态路由的前面，保证固定路径优先匹配：

<Switch>
  <Route path='/products' component={ProductsScreen} />
  <Route path='/register' component={RegisterScreen} />
  {/* 动态路由放在所有固定路由最后 */}
  <Route path='/:id' component={ProductScreen} />
</Switch>

方案2：给动态路由加前缀（更稳妥，推荐） #

无前缀的动态路由容易和后续新增的固定路径产生冲突，建议给商品详情路由加专属前缀：

<Switch>
  <Route path='/products' component={ProductsScreen} />
  <Route path='/register' component={RegisterScreen} />
  <Route path='/product/:id' component={ProductScreen} />
</Switch>

修改后同步调整所有跳转到商品详情的链接路径，从/${id}改为/product/${id}即可。

在ProductScreen中添加兜底判断，避免商品不存在时页面直接崩溃：

const ProductScreen = (props) => {
  const product = allProducts.find(
    (x) => x._id === Number(props.match.params.id)
  );
  // 兜底逻辑
  if (!product) {
    return <div style={{padding: '2rem'}}>商品不存在或已下架</div>
  }
  // 原有渲染逻辑
  // ...
}

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