1

I am fairly new with react and routing, I was trying to migrate our routing from V5 to v6, and my router code was something like this:

<Router history={history} key={Math.random()}>

But after upgrading to router v6, it gives me an error in the history props:

(property) history: BrowserHistory Type '{ children: Element; history: BrowserHistory; key: number; }' is not assignable to type 'IntrinsicAttributes & RouterProps'. Property 'history' does not exist on type 'IntrinsicAttributes & RouterProps'.

If history can not pass as a prop in Router, how should I handle this?

Youssouf Oumar
  • 29,373
  • 11
  • 46
  • 65
adnan_aust
  • 45
  • 8
  • What kind of component do you use in your app, functions, or class? In `V6`, you should use `useNavigate` hook instead of passing `history` as props. – Youssouf Oumar Dec 12 '22 at 08:31
  • I used functional components. @yousoumar – adnan_aust Dec 12 '22 at 08:38
  • Depending on what specific version of RRDv6 you are installing you may or may not be able to pass an external `history` object to a router. What exactly are you trying to accomplish overall via *some* external `history` object? Can you edit the post to include a more complete [mcve] including the imports and the `history` object, and where it's used/referenced? – Drew Reese Dec 12 '22 at 08:49
  • Does this help answer your question? https://stackoverflow.com/a/70000286/8690857 Likely solution for what you are trying to do that works with RRDv6. Things really changed in RRDv6.4 with the introduction of the Data APIs though, so this is why the specific version matters a bit. – Drew Reese Dec 12 '22 at 09:36

2 Answers2

2

In React Router Dom V6, we should be using useNavigate where we wanna do redirection instead of passing history to Router. As an example, here is how you would use it in a component:

import { useNavigate } from "react-router-dom";

export default function Component() {
  const navigate = useNavigate();

  return <button onClick={() => navigate("/home")}>Navigate To Home</button>;
}

This migration guide made by React Router Dom team will be helpful during your migration process.

Youssouf Oumar
  • 29,373
  • 11
  • 46
  • 65
0

Thank you, everyone, basically I had a history.listen inside an useEffect hook to detect changes in the URL, I used useLocation hook instead and used BrowserRouter.

adnan_aust
  • 45
  • 8