The history object can only navigate to specifically defined paths via a path string with .push/.replace, or navigate forward/backward via a delta with .go.

You can create a "goToParent" handler that reads the current matched location's pathname and slice off the last path segment and issue a PUSH.

Example:

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

If you wanted to go two levels up, i.e. from "/dashboard/1/sub-page/7" to "/dashboard/1" then use .slice(0, -2) to slice off the last two segments.

Try to use the useNavigate() hook from react-router-dom.

As I can see this might satisfy your need by passing a delta as an argument to the navigate function, or you can simply pass the route you want to go.

You can use "." or ".." in your Link component to go one or two levels up.

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

Another approach is to map routes into helpers so you can reutilize them all along the codebase:

// 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>