React Router v6可选参数替代方案：原v5末尾加?的写法如何改写？

React Router v6 相对于v5的路由写法有两处核心调整：一是Route组件取消了component属性，改用element属性传入组件实例；二是早期v6版本暂不支持路径末尾?标记可选参数，后续v6.1.0及以上版本已经重新恢复了该语法支持。

通用兼容写法（支持所有v6版本） #

直接传入数组形式的path属性，同时匹配带参数和不带参数的两种路径：

<Route path={["/cart", "/cart/:id"]} element={<CartPage />} />

v6.1.0及以上版本简化写法 #

官方已经恢复了?可选参数语法，仅需要替换原有的component属性即可：

<Route path="/cart/:id?" element={<CartPage />} />

配套参数读取方式 #

在CartPage组件中使用useParams Hook读取参数，无参数时id值为undefined，和v5行为完全一致：

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

function CartPage() {
  const { id } = useParams();
  // 逻辑处理：id存在时为指定id的购物车，不存在时为默认购物车
  return <div>{id ? `购物车ID：${id}` : '默认购物车'}</div>
}

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