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

Question

我正在使用反应路由器，我有以下代码：

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>
  );
};