Push not updating use params (react router v6)

[wvanooijen92]

Thank you for this package, I'm running into something silly, I am wondering if I miss something obvious.

It seems that if I use dispatch(push('route/with-param')) useParams is not getting updated.

My route looks like <Route path="/home/:tab" element={<HomePage />} />

And then I have two components;

Here I need the value of the param:

import HomeTabs from 'Components/HomeTabs';
import React, { Component, useEffect, useState } from 'react';
import { useParams } from 'react-router';

const HomePage = ( ) => {
  const p = useParams(); // not receiving new value for `tab`

  return (
    <>
      <HomeTabs />
      <div>This is home {p.tab}</div>
    </>
  );
}

export default HomePage;

Here is the navigation:

import React, { Component, useEffect, useState } from 'react';
import { useDispatch } from 'react-redux';
import { push } from 'redux-first-history';
import { useLocation, useParams, useNavigate } from "react-router-dom";

import NavTabs from 'Presentation/Tab';

const tabs = [{
  value: "tab1",
  label: "1"
},{
  value: "tab2",
  label: "2"
}];

const allowedTabValues = tabs.map(({value}) => value);

const HomeTabs = () => {
  const navigate = useNavigate();
  const dispatch = useDispatch();
  const {tab} = useParams();

  useEffect(() => {
    if(allowedTabValues.indexOf(tab) < 0){
      const url = `/home/tab1`
      dispatch(push(url));
      // navigate(url); // -> I need this to make it work
    }
  }, [tab]);

  const handleChangeTab = (e, value) => {
    const url = `/home/${value}`
    dispatch(push(url));
    // navigate(url); // -> I need this to make it work
  };

  return (
      <NavTabs tabs={tabs} value={tab} onChange={handleChangeTab}/>
  );
}

export default HomeTabs;

Does anyone know what I am doing wrong? Or is this a bug?

[wvanooijen92]

Just realised I made some mistakes setting it up! My bad!