更换CreateHashRouter后所有路由均跳转至首页问题求助

问题出在导航栏使用原生<a>标签跳转，且路径大小写不匹配，导致createHashRouter无法正确处理路由。

1. 替换原生a标签为React Router的Link组件 #

在Header组件中导入Link并替换所有跳转用的a标签：

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

export let Header = (props:HeaderProps) => {
    return(
        <div className="headerStyle">
            <Link className="titleStyle" to="/">{props.title}</Link>
            <Link className="navBarStyle" to="/Folio"> Folio </Link>
            <Link className="navBarStyle" to="/RMP"> RMP </Link>
            <Link className="navBarStyle" to="/Compare"> Compare </Link>
            <Search/>
        </div>
    )
}

2. 统一路径大小写 #

确保导航的to属性值和路由配置中的path完全一致（比如路由里是"Folio"，导航就用"/Folio"，不要写成小写的"/folio"），避免因大小写不匹配导致路由无法识别。

修复原理 #

• Link是React Router专用导航组件，会在不刷新页面的情况下更新URL的hash部分（比如/#/Folio），让HashRouter正确匹配对应组件。
• 原生<a>标签的href="/folio"会触发浏览器整页刷新，导致HashRouter重置到首页，这就是你看到URL变化但页面停留在首页的核心原因。

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