Use of React router v6 history/Navigate in redux

Question

I'm trying to use history.push("/") from react router v6 to redirect when action is dispatched from redux store. When i use history it replaces the url but not the content ( component is not rendered )

I know we can use https://www.npmjs.com/package/connected-react-router but its not supporting v6 of react router.

Any thoughts how this can be achieved with custom router or any ref's ?

Any help much appreciated, thanks

Does this answer your question? https://stackoverflow.com/a/70000286/8690857 or https://stackoverflow.com/a/70012117/8690857 — Drew Reese, Feb 15 '22 at 08:04
Can you update your question to share what you've tried already? https://stackoverflow.com/help/minimal-reproducible-example — Drew Reese, Feb 15 '22 at 08:52

score 1 · Answer 1 · answered Feb 15 '22 at 08:01

there are some changes at v6, you can following :

// v5 import { useHistory } from 'react-router-dom';

V5

function MyButton() {
  let history = useHistory();
  function handleClick() {
    history.push('/home');
  };
  return <button onClick={handleClick}>Submit</button>;
};

V6

// v6 import { useNavigate } from 'react-router-dom';

function MyButton() {
  let navigate = useNavigate();
  function handleClick() {
    navigate('/home');
  };
  return <button onClick={handleClick}>Submit</button>;
};

and

V5

// v5
history.push('/home');
history.replace('/home');
history.push('/home', {state: state});

V6

// v6
navigate('/home');
navigate('/home', {replace: true});
navigate('/home', {state: state});

This isn't very useful at all in the context of the question, which is in a redux reducer and NOT in a functional component — KatGaea, Apr 29 '23 at 09:38

Use of React router v6 history/Navigate in redux

1 Answers1