react-router-dom如何拦截section路径下无效URL参数并跳转至MainMap

问题原因 #

/section/5会命中section/:id的路由规则，直接渲染<SectionMap />组件，不会触发*的兜底路由，因此出现空白页。你只需要对路由参数id做有效性校验，不符合规则时跳转到首页即可，以下是两种常用实现方案：

方案1：在SectionMap组件内校验（最简单） #

在<SectionMap />组件中获取路由参数判断有效性，无效则直接跳转：

import { useParams, useNavigate } from 'react-router-dom';
import { useEffect } from 'react';

const SectionMap = () => {
  const { id } = useParams();
  const navigate = useNavigate();
  // 转换为数字校验，避免字符串类型匹配问题
  const numericId = Number(id);

  useEffect(() => {
    // 校验规则：不是数字 或者 不在1-4范围内就跳转
    if (isNaN(numericId) || numericId < 1 || numericId > 4) {
      // replace设为true可以避免无效地址留在浏览历史中
      navigate('/', { replace: true });
    }
  }, [id, navigate]);

  // 原有SectionMap组件的业务逻辑
  // ...
}

方案2：路由层统一校验（适合多组件复用规则的场景） #

封装一个公共的路由校验组件，在路由配置层直接拦截无效请求：

1. 先封装校验组件

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

const ValidSectionGuard = ({ children }) => {
  const { id } = useParams();
  const numericId = Number(id);
  if (isNaN(numericId) || numericId < 1 || numericId > 4) {
    return <Navigate to="/" replace />
  }
  return children;
}

2. 修改路由配置

<Routes>
    <Route path='/' element={<MainMap />} />
    <Route path='section/:id' element={
      <ValidSectionGuard>
        <SectionMap />
      </ValidSectionGuard>
    } />
    <Route path='*' element={<MainMap />} />
</Routes>

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