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

【问题标题】：React - React Router Dom, hashbang routing solutionReact - React Router Dom，hashbang 路由解决方案
【发布时间】：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 上运行。

【问题讨论】：

标签： javascript reactjs iis react-router-dom

【解决方案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。这将有所帮助：stackoverflow.com/a/56622289/6306974
对不起，对不起......它工作正常......我在尝试HashRouter之前使用了“this.props.history.push”而不是“props.history.push”。它现在工作正常，不是路由器问题；我知道我需要在路由页面的组件中使用 withRouter，但这是另一个问题。谢谢！

【解决方案2】：

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

【讨论】：