单击按钮时重定向到上一个组件（反应路由）答案

【问题标题】：Redirect to previous component on button click (React Routing)单击按钮时重定向到上一个组件（反应路由）
【发布时间】：2021-01-24 18:00:52
【问题描述】：

我有一个反应组件，当我单击菜单选项时会呈现，此页面有一个要完成的表单，并且已经完成，onSubmit 我想将它重定向到用户之前单击的组件。

我尝试使用 Redirect 并使用 useHistory() 来重定向它，但它们都不起作用，这就是我使用 useHistory() 所做的：

当前网址是localhost/home/schemes/firstoption，我想回localhost/home/firstoption。

Scheme.js：

  let history = useHistory();


<Button
                className="button-dc btn-block top30"
                variant="primary"
                type="submit"
                disabled={enableButton}
              >
                Finish
              </Button>
const onSubmit = async (event) => {
    event.preventDefault();
    event.stopPropagation();
    {...}
    history.push(previousURL);
  };
  const URL = window.location.href;
  const previousURL = URL.split("scheme/").join("");
  previousURL // localhost/home/firstoption

这会创建此 URL，但不会重定向：

https://localhost/home/scheme/https://localhost/home/firstoption

我也尝试做同样的事情，但没有使用

history.push(previousURL);

我用过这个：

return <Redirect to={previousURL} />

这不会创建 URL，也不会重定向。

有人看到这有什么错误吗？

【问题讨论】：

标签： javascript reactjs routes react-hooks

【解决方案1】：

为了重定向你可以使用历史的推送方法

history.push({
    pathname:'yourpathname',
})

或者您可以使用来自 react-router-dom 的链接简单地包装您的按钮：

   import { Link } from 'react-router-dom'

    <Link to="pathname">
    <Button
                    className="button-dc btn-block top30"
                    variant="primary"
                  >
                    Finish
                  </Button>
    </Link>

问题在于您编写的路径名，它是相对于应用程序主页路由的路径名，而不是完整的 URL

【讨论】：

该链接将previousURL附加到当前URL，所以我将拥有这个：localhost/home/scheme/https://localhost/home/firstoption。我尝试使用这样的路径名：history.push({ pathname:{previousURL}, });但它也不起作用
链接与应用程序 url 相关（由 / 定义）路径名必须始终相对于应用程序路径，而不是完整 URL跨度>

【解决方案2】：

我无法使任何建议的选项起作用，所以我最终这样做了：

window.history.pushState({}, null, previousURL); // previousURL = localhost/home/firstoption
location.reload();

我希望这对其他人也有帮助！

【讨论】：