React路由页面渲染问题：NavLink跳转后如何触发路由重渲染？

分类页面路径为novosibirsk/spetstekhnika，购物车页面路径为novosibirsk/test-33_2736，二者仅通过路径中的下划线_区分。当前路由配置如下：

<Route
  path={`/${cityAlias}/:alias/:fullAlias?/:maxAlias?`}
  element={
    <Suspense fallback={<Loader />} >
      {!window.location.href.includes('_') ?
        <Catalog />
        :
        <CartProduct getIdPage={setIdProductPage} />}
    </Suspense>
  }>
</Route>

使用普通href跳转时功能正常，但通过NavLink跳转后页面无变化。需要实现页面加载时重新渲染路由，或模拟页面重载的效果。

1. 用React Router的useLocation监听路由变化 #

不要直接依赖window.location.href，改用React Router提供的useLocation钩子获取当前路径，路由变化时组件会自动触发重新渲染：

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

// 抽离判断逻辑为独立组件
const DynamicPage = ({ getIdPage }) => {
  const location = useLocation();
  const isCartPage = location.pathname.includes('_');

  return isCartPage ? 
    <CartProduct getIdPage={getIdPage} /> : 
    <Catalog />;
};

// 路由配置更新
<Route
  path={`/${cityAlias}/:alias/:fullAlias?/:maxAlias?`}
  element={
    <Suspense fallback={<Loader />} >
      <DynamicPage getIdPage={setIdProductPage} />
    </Suspense>
  }>
</Route>

2. 给组件加key强制重新渲染 #

如果不想重构组件结构，可以给目标组件添加key属性，用当前路径作为key值。路由变化时key改变，React会销毁旧组件并创建新组件，达到强制刷新的效果：

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

const RouteElement = () => {
  const location = useLocation();
  return (
    <Suspense fallback={<Loader />} >
      {!location.pathname.includes('_') ?
        <Catalog key={location.pathname} />
        :
        <CartProduct key={location.pathname} getIdPage={setIdProductPage} />}
    </Suspense>
  );
};

// 路由配置
<Route
  path={`/${cityAlias}/:alias/:fullAlias?/:maxAlias?`}
  element={<RouteElement />}>
</Route>

3. 拆分路由规则（最佳实践） #

通过下划线判断页面的方式不够健壮，建议直接拆分路由规则，明确匹配不同页面：

{/* 匹配分类页面 */}
<Route path={`/${cityAlias}/:alias`}>
  <Route index element={<Catalog />} />
  <Route path=":fullAlias" element={<Catalog />} />
  <Route path=":fullAlias/:maxAlias" element={<Catalog />} />
</Route>

{/* 匹配购物车页面 */}
<Route path={`/${cityAlias}/:alias_:id`} element={<CartProduct getIdPage={setIdProductPage} />} />
<Route path={`/${cityAlias}/:alias/:fullAlias_:id`} element={<CartProduct getIdPage={setIdProductPage} />} />

内容的提问来源于stack exchange，提问作者Александр