使用 Redirect 组件的路径名时，React HashRouter 有两个哈希符号“#”

Posted 2023-02-22

【中文标题】使用 Redirect 组件的路径名时，React HashRouter 有两个哈希符号“#”

【英文标题】：React HashRouter is having two hash symbols '#' when using Redirect component's pathname

【发布时间】：2021-08-27 12:01:50

【问题描述】：

我在我的应用程序中使用"react-router-dom": "^5.2.0"。我已经使用它的HashRouter 来处理我的路由。我的根路由应与现有查询字符串一起重定向到特定路由。我遇到的问题是，一旦我使用了Redirect 组件的pathName，它就会在我的 URL 中添加两个“#”符号。

当前行为： mydomain.org/myApp#/?someParam=someValue => mydomain.org/myApp#/CompA#/?someParam=someValue

预期行为： mydomain.org/myApp#/?someParam=someValue => mydomain.org/myApp#/CompA/?someParam=someValue

这是我所做的

import React from 'react';
import  Redirect, HashRouter, Route, Switch  from 'react-router-dom';

const App: React.FC<any> = (props: any) => 

  return (
      <HashRouter>
        <Switch>
          <Route exact key="/" path="/">
            <RedirectComp to="/CompA" />
          </Route>
          <Route exact key="/CompA" path="/CompA">
            <CompA />
          </Route>
        </Switch>
      </HashRouter>
  );
;

const RedirectComp: React.FC<any> = (props: any) => 
  return (
    <Redirect to= ...location, pathname: props.to  />
  );

我使用自定义组件进行重定向的原因是在重定向时保留 queryString。这就是为什么我不能使用<Redirect to="/CompA" />。

有没有一种更简洁的方法来实现这一点，而无需在 Location.hash 中进行字符串搜索并更新它？

【参考方案1】：

看起来您使用的是全局 location 对象，而不是 Redirect 期望的位置。在RedirectComp 中，使用useLocation() 挂钩获取位置。两个Location 对象都有一个哈希字段，但它们不匹配，因为您使用的是HashRouter。

此外，如果您只想保留查询字符串，则只需在Redirect 中包含Location 对象中的search 字段和pathname。

const RedirectComp: React.FC<any> = (props: any) => 
  const location = useLocation();
  return (
    <Redirect to= search: location.search, pathname: props.to  />
  );