react-router-dom 如何返回（不在历史记录中）

Question

我有一些嵌套路线，可以说我需要导航回“上一级”。

我正在使用 react-router-dom v5.3.1

history.goBack() 会将我带到上次访问的页面，就像我在浏览器中使用后退按钮一样。我不需要这个。

想象一下我的历史是这样的......:[=17=]

[
  dashboard/1/sub-page/7
  dashboard/1/sub-page/13
  dashboard/1/sub-page/9
  dashboard/1/sub-page/1
]

我的浏览器URL是：localhost:8080&app.html#/dashboard/1/sub-page/7

react-router-dom 是否提供了一种安全的导航方式：localhost:8080&app.html#/dashboard/1 - 或者什么才是合适的方法？

Answer 1

尝试使用 react-router-dom 中的 useNavigate() 钩子。

据我所知，this 可能会通过将增量作为参数传递给导航函数来满足您的需求，或者您也可以简单地传递您想去的路线。

Answer 2

您可以使用“.”或 Link 组件中的“..”可向上一级或二级。

<Link to=".">Go one level up</Link>
<Link to="..">Go two levels up</Link>

另一种方法是将路由映射到助手中，这样您就可以在代码库中重新利用它们：

// Routes helpers
const dashboardRoute = (id) => `/dashboard/${id}`;
const subPageRoute = (id, subId) => `/dashboard/${id}/sub-page/${subId}`; 

// Routes mapping
<Switch>
  <Route path={dashboardRoute(":id")}>
    <Dashboard />
  </Route>
  <Route path={subPageRoute(":id", ":subId")}>
    <SubPage/>
  </Route>
</Switch>

// Route helper usage
<Link to={dashboardRoute(id)} >Go to dashboard route</Link>

Answer 3

history 对象只能通过带有 .push/.replace 的路径字符串导航到特定定义的路径，或者通过带有 [=14] 的增量导航 forward/backward =].

您可以创建一个“goToParent”处理程序来读取当前匹配位置的 pathname 并切掉最后一个路径段并发出 PUSH。

示例：

import { useLocation, useHistory } from "react-router-dom";

...

const { pathname } = useLocation();
const history = useHistory();

const goUpLevel = () => {
  const parent = pathname.split("/").slice(0, -1).join("/");
  history.push(parent);
}

如果您想向上两层，即从 "/dashboard/1/sub-page/7" 到 "/dashboard/1" 然后使用 .slice(0, -2) 切掉最后的两个段。

react-router-dom 如何返回（不在历史记录中）

react-router-dom how to navigate back (not in history)

javascript

reactjs

react-router-dom