React - React Router Dom，hashbang 路由解决方案

Posted 2023-02-21

【中文标题】React - React Router Dom，hashbang 路由解决方案

【英文标题】：React - React Router Dom, hashbang routing solution

【发布时间】：2021-04-03 10:18:48

【问题描述】：

如何在 React 中使用 react-router-dom 和 hashbang 进行路由？ 类似的东西

http://somesite.com/#/home

http://somesite.com/#/about

我觉得很好。

在 Angular 路由中，我在 RouterModule 中的 angular/router 中使用了 useHash: true 来实现这一点。

在Vue路由中，我在vue-router的createRouter方法中使用了history: createWebHashHistory()来实现。

有什么方法可以在这里实现吗？

如果不是 - 请向我推荐一些其他可靠的 React 路由库。

附：如果你想知道我为什么需要它，答案就是 IIS。而且我不想通过过于复杂的过程让它在 IIS 上运行。

【参考方案1】：

您需要使用HashRouter：https://reactrouter.com/web/api/HashRouter

例如，您可以执行以下操作：

import  HashRouter as Router, Route, Switch  from 'react-router-dom';

const App = () => 
  return (
    <Router>
      <Switch>
        <Route exact path="/foo">
          <Component1/>
        </Route>
        <Route exact path="/bar">
          <Component2/>
        </Route>
      </Switch>
    </Router>);

【讨论】：

谢谢。但是，如何在路由的页面上使用 props.match、props.location、props.history...？现在我尝试了这个“无法读取未定义的属性'url'”，它会引发错误，无论我是在开发服务器上还是在 IIS 上尝试过

@Dalibor 你需要使用withRouter。这将有所帮助：***.com/a/56622289/6306974

对不起，对不起......它工作正常......我在尝试HashRouter之前使用了“this.props.history.push”而不是“props.history.push”。它现在工作正常，不是路由器问题；我知道我需要在路由页面的组件中使用 withRouter，但这是另一个问题。谢谢！

【参考方案2】：

使用<HashRouter> 代替其他路由器之一。