React.js HashRouter 404页面

编程问答 2022-08-18

问题描述

我在用React 404实现功能全面的HashRouter页面时遇到问题。

routes.tsx 

export const Routes = () => (
  <HashRouter>
    <Switch>
      <Route path="/" exact={true} component={Home} />
      <Route path="/route1" component={Route1} />
      <Route path="/route2" component={Route2} />
      <Route component={ErrorPage} />
    </Switch>
  </HashRouter>
);

app.tsx 

<>
  ...
  <Routes />
  ...
</>

当前行为：

  1. 在地址栏中输入{url}/#/{non-existing-route}时，行为正确-浏览器显示ErrorPage
  2. 在地址栏中输入{url}/{non-existing-route}时，行为不正确-浏览器将网址更改为{url}/{non-existing-route}#/并显示Home页面。

我希望在两种情况下都显示ErrorPage。

当我使用browserRouter时不会发生此问题，但是我必须在这里使用HashRouter。

谢谢您的帮助！

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

hashjavascriptreact-routerreactjsreactjs