react-router-dom v6 HashRouter下访问#cats无法渲染组件的问题

问题原因 #

react-router-dom v6的HashRouter默认会将URL中#/后面的内容作为路由路径解析，直接访问#cats时，hash部分没有前置的/，导致解析后的路径与配置的路由不匹配，从而出现无匹配路由的提示。

解决方案 #

只需两步调整即可实现访问#cats时渲染Cats组件：

1. 修改HashRouter的basename属性
   在index.js中，给HashRouter添加basename=""配置，让它直接解析整个hash内容作为路由路径，不再强制要求前置/：

import { HashRouter } from 'react-router-dom';
import App from './App';

ReactDOM.createRoot(document.getElementById('root')).render(
  <HashRouter basename="">
    <App />
  </HashRouter>
);

2. 调整路由配置顺序与路径
   在App.js中，将Cats组件的路由路径设为"cats"（不带前置/），并确保该路由放在通配符路由之前（react-router会按顺序匹配路由，通配符路由需放在最后）：

import { Routes, Route } from 'react-router-dom';
import Splashpage from './Splashpage';
import Cats from './Cats';

function App() {
  return (
    <Routes>
      <Route path="cats" element={<Cats />} />
      <Route path="*" element={<Splashpage />} />
    </Routes>
  );
}

export default App;

可选：兼容/#/cats路径 #

如果需要同时支持#cats和/#/cats两种访问形式，可以添加一个重定向路由，将/#/cats重定向到#cats：

import { Routes, Route, Navigate } from 'react-router-dom';
import Splashpage from './Splashpage';
import Cats from './Cats';

function App() {
  return (
    <Routes>
      <Route path="cats" element={<Cats />} />
      <Route path="/cats" element={<Navigate to="cats" replace />} />
      <Route path="*" element={<Splashpage />} />
    </Routes>
  );
}

export default App;

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