I am setting up the routing using react-router and the useRouteMatch hook. I can't load a component because the path is still different than the URL, but I wonder why? Because as you can see the URL in the browser tells me it should match, but then when I log the 'url' value from useRouteMatch() it still is one step behind.

url in browser will be 'http://localhost:3000/compliance/546545/BeleggersProfiel/Profiel', yet when I log the 'url' value from useRouteMatch it will say http://localhost:3000/compliance/546545/BeleggersProfiel, so one step behind.

If I log the path below entered in the Route item, it is '/compliance/:compliance_id/BeleggersProfiel/:substep' so it should match the URL in the browser, but it doesn't. Somebody knows why the url is not up-to-date?

export const routes = [
  {
    path: '/:substep',
    Component: SubSteps,
  },
];
function SubWizardRoutes({ steps, wizardRoutes = routes }) {
  const { push, location } = useHistory();
  const { url, path: basePath } = useRouteMatch();

  // when we entered the app and fetched the steps, proceed to the first step
  if (location.pathname === url && steps.length > 0) {
    push(`${url}/${steps[0].name}`);
  }

  return (
    <Switch>
      {wizardRoutes.map((route) => {
        const { Component, path } = route;
        return (
          <Route
            path={`${basePath}${path}`}
            render={({ ...rest }) => {
              return <Component steps={steps} {...rest} />;
            }}
          />
        );
      })}
    </Switch>
  );
}

export default SubWizardRoutes;