React HashRouter 在使用重定向组件的路径名时有两个哈希符号“#”

Question

我正在为我的应用程序使用 "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 中进行字符串搜索并更新它？

Answer 1

您似乎在使用全局 location object instead of the location that Redirect expects. Inside RedirectComp, use the useLocation() 挂钩来获取位置。两个 Location 对象都有一个哈希字段，但它们不匹配，因为您使用的是 HashRouter.

此外，如果您只想保留查询字符串，则只需将 Location 对象中的 search 字段包含在 [=19= 中 pathname ].

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

React HashRouter 在使用重定向组件的路径名时有两个哈希符号“#”

React HashRouter is having two hash symbols '#' when using Redirect component's pathname

redirect

reactjs

react-router-dom