React Router v6含空格URL匹配失效跳转NotFound组件问题求助

不少开发者都遇到过这个问题——React Router 6对路由路径的解析遵循严格的URL规范，而早期版本对空格的处理更宽松，导致原本能正常匹配的带空格URL现在会直接跳转到NotFound组件。

修复方法： #

• 对路由路径进行URL编码
  URL中的空格规范写法是%20，所以从JSON动态生成路由时，需要对路径做编码处理。注意要保留路径开头的斜杠，避免encodeURIComponent把/也转成%2F：

  import { Routes, Route } from 'react-router-dom';
  import routeData from './your-routes.json';
  
  function AppRoutes() {
    return (
      <Routes>
        {routeData.map(route => {
          // 处理路径：编码后替换开头的%2F为/
          const encodedPath = encodeURIComponent(route.path).replace(/^%2F/, '/');
          return (
            <Route
              key={route.id}
              path={encodedPath}
              element={route.element}
            />
          );
        })}
        <Route path="*" element={<NotFound />} />
      </Routes>
    );
  }
  

• 跳转路由时同步编码
  使用Link或useNavigate跳转时，也要确保目标路径是编码后的格式：

  // Link组件写法
  <Link to="/an%20example">示例页面</Link>
  
  // useNavigate写法
  import { useNavigate } from 'react-router-dom';
  
  const navigate = useNavigate();
  const goToExample = () => {
    const encodedPath = encodeURIComponent('/an example').replace(/^%2F/, '/');
    navigate(encodedPath);
  };
  

• 替换空格为合法字符（可选）
  如果业务允许，也可以直接将URL中的空格替换为短横线（-）或下划线（_），既符合URL规范，也能避免编码操作：

  const formattedPath = route.path.replace(/\s+/g, '-'); // 把所有空格换成短横线
  

问题根源： #

React Router 6严格遵循RFC标准的URL规则，不再自动解析路径中的空格；而早期版本会对路径做宽松处理，自动将空格转换为%20，这就导致旧代码中的带空格路径在新版本中失效。

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