React Router：如何在不替换任何内容的情况下正确附加到路由/url？答案

【问题标题】：React Router: How to properly append to route/url without replacing anything?React Router：如何在不替换任何内容的情况下正确附加到路由/url？
【发布时间】：2020-12-10 21:09:33
【问题描述】：

如何使用 react router 附加到路由？

假设当前路由是/page1/page2，我想路由到/page1/page2/next-page

首先我得到路由器

const router = useHistory();

当我像这样使用push 时

router.push("next-page");

它路由到/page1/next-page。

当我使用像这样添加/

router.push("/next-page");

它路由到/next-page

我也尝试过类似的方法

router.push(`${router.location.pathname}/next-page`)

但是这样的问题是，当我目前在/page1/page2/ 时，我最终在/page1/page2//next-page 有两个//。

有没有像router.push("/page1/page2/next-page")这样写完整路由的好方法？

【问题讨论】：

标签： reactjs react-router react-router-dom

【解决方案1】：

我最终做的是定义一个函数，如果存在则从 url 中删除 /

export const removeSlashSuffix = (input)  => {
    if (input.charAt(input.length - 1) === "/") {
        return input.substr(0, input.length - 1)
    } else {
        return input;
    }
}

然后像这样路由

router.push(`${removeSlashSuffix(router.location.pathname)}/nest-page`)

这样我就不会遇到在带有// 的 url 中解析的路由的问题。

这是一个有点老套的解决方案，我希望 react-router-dom 能够开箱即用地支持它，但它似乎并不支持

【讨论】：

【解决方案2】：

如果您使用router.push("/page1/page2/next-page")，它应该可以工作。我认为您需要指定完整路径，我认为这样做没有任何问题

【讨论】：

这正是我不想做的。我不想指定完整路径，因为在某些情况下我不知道完整路径，我只想在现有路径中添加一些内容

【解决方案3】：

如果你想在现有路径上附加一些东西，你应该能够做类似的事情

const location = useLocation()
const currentPath = location.pathname // to get current route
router.push(`${currentPath}/next-page`)

这是一个 sudo 代码，因此您可能需要对其进行一些调整以获得正确的语法

【讨论】：