Watch route params changes, re-fetch data on change

February 14, 2022

How can I react to route param changes? I want to re-fetch data for new params of my item.
For e.g whenever I move from /1 to /2 I want to fetch the data for id 2. How can I do this using router v6?

import './App.css';
import { useParams } from "react-router-dom";

function Item() {
  const { id } = useParams();

    return (
      <div className="test">
       test of nested route id: { id };
      </div>
    );
  }
  
  export default Item;

>Solution :

You can detect changes with useEffect

import './App.css';
import { useParams } from "react-router-dom";
import {useEffect} from "react"

function Item() {
  const { id } = useParams();

  useEffect(() => {
    //...your function goes here
  }, [id])

    return (
      <div className="test">
       test of nested route id: { id };
      </div>
    );
  }

export default Item;