React Router DOM: Change match in path

Question

In my app I have a router set up like this

  <BrowserRouter basename={props.base_path}>
    <Switch>
      <Route
        path="/views/:view_id/card"
        render={(routerProps) => (
          <>
            <Toolbar {...routerProps} />
          </>
        )}
      ></Route>
    </Switch>
  </BrowserRouter>

Inside Toolbar I would like to be able to change the value of:view_id. I know that using useHistory I can replace parts of the path but I'm not aware of a way I can specifically target the:view_id part of the path.

What would be the most correct way to change this matched variable with react-router-dom?

Answer 1

One option I have found is to just pass the path down to the Toolbar and to do something like

history.push(props.path.replace(':view_id', opt.value))