React中如何同时使用Hash路由与普通斜杠路由

这个需求可以实现，你当前写法不生效的核心原因是：React Router 的路由匹配逻辑只读取URL的pathname段，#后的hash片段、?后的查询参数都不会参与Route的path规则匹配，所以直接把hash写在path属性里永远无法命中路由。

根据实际业务场景，可选择以下两种实现方案：

方案1：单路由实例，以history普通路由为主体，hash作为组件渲染判断标识 #

这是适配你给出示例场景的最优方案，适合绝大多数同类需求：全站默认使用/开头的普通history路由，仅在特定路径下通过hash值控制组件展示/切换，不需要切换路由模式，直接通过location对象读取当前hash做条件判断即可。

基于你提供的React Router v5代码，改造后可直接运行的版本如下：

import { BrowserRouter as Router, Switch, Route, Link, useLocation } from 'react-router-dom';

// 抽离Dashboard的渲染判断逻辑
function DashboardPage() {
  const location = useLocation();
  // 仅当路径为/dashboard 且hash为#dashMenu时渲染目标组件
  return location.pathname === '/dashboard' && location.hash === '#dashMenu' ? <Dashboard /> : null;
}

export default function BasicExample() {
  return (
    <Router>
      <div>
        <ul>
          <li>
            <Link to="/">Home</Link>
          </li>
          <li>
            <Link to="/about/aboutView">About</Link>
          </li>
          <li>
            {/* Link组件原生支持带hash的跳转路径，不需要额外处理 */}
            <Link to="/dashboard#dashMenu">Dashboard</Link>
          </li>
        </ul>

        <hr />
        
        <Switch>
          <Route exact path="/">
            <Home />
          </Route>
          <Route path="/about/aboutView">
            <About />
          </Route>
          <Route path="/dashboard">
            <DashboardPage />
          </Route>
        </Switch>
      </div>
    </Router>
  );
}

这种写法完全保留了原生hash的特性：浏览器前进后退可识别hash变化、可配合锚点做页面滚动定位，所有路由逻辑统一维护，没有额外的复杂度。

方案2：路径分区挂载双模式路由（部分业务纯hash路由，部分业务普通路由） #

如果你的需求是某一整块独立业务完全使用hash路由（比如嵌入第三方页面、不需要服务端配置路由回退的子应用模块），其余业务使用普通history路由，可以按路径分区平级挂载两套独立的路由实例，禁止嵌套避免路由状态冲突：

• 根路径、/about/*等普通业务路径，使用BrowserRouter承载
• 独立hash业务模块（比如/app/*下的所有页面），使用HashRouter承载

示例代码如下：

import { BrowserRouter, HashRouter, Switch, Route, Link } from 'react-router-dom';

// 普通history模式路由区块
function HistoryApp() {
  return (
    <BrowserRouter>
      <div>
        <ul>
          <li><Link to="/">Home</Link></li>
          <li><Link to="/about/aboutView">About</Link></li>
          <li><a href="/app/#/dashMenu">进入Hash模块Dashboard</a></li>
        </ul>
        <Switch>
          <Route exact path="/" component={Home} />
          <Route path="/about/aboutView" component={About} />
        </Switch>
      </div>
    </BrowserRouter>
  )
}

// Hash模式路由区块
function HashApp() {
  return (
    <HashRouter>
      <div>
        <ul>
          <li><Link to="/dashMenu">Dashboard</Link></li>
          <li><a href="/">返回普通模式首页</a></li>
        </ul>
        <Switch>
          <Route path="/dashMenu" component={Dashboard} />
        </Switch>
      </div>
    </HashRouter>
  )
}

// 根组件根据当前路径判断挂载对应路由区块
export default function App() {
  const currentPath = window.location.pathname;
  // /app开头的路径全部走hash路由模块
  if (currentPath.startsWith('/app')) {
    return <HashApp />
  }
  return <HistoryApp />
}

注意事项 #

• 两个路由区块之间的跳转不要跨区块使用对方的Link组件，直接用原生a标签即可，避免路由状态错乱
• 双路由模式会提升项目路由逻辑的维护成本，没有强需求的情况下优先选择方案1

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