Question

我正在使用React Router，并且我有以下代码：

let history = useHistory();

let goToReviewPage = () => history.push(`review/${productId}`);

我当前的网址是：/foo/bar，打goToReviewPage()会将我重定向到

/foo/review/${productId}而不是/foo/bar/review/${productId}

我不确定如何设置基本路径会推动历史记录。

Answer 1

您可以使用 React Router 的 match.url。示例：

const Component = ({ productId }) => {
  const match = useRouteMatch();
  const history = useHistory();

  const handleClick = () => {
    history.push(`${match.url}/review/${productId}`);
  };

  return (
    <button onClick={handleClick}>Click me</button>
  );
};

Answer 2

一种方法是使用window.location获取当前路径。

例如：

history.push(window.location.pathname + '/' + `review/${productId}`);

window.location api

反应路由器推送到历史记录并保留相对路径

2 个答案: