How do i change this react router v5 code that uses props to v6-CodePudding

Since props don't work with v6 what should i do to make this code work with v6. How do i pass the right information so that the information is displayed as intended.

Snippet from restaurant.js

const Restaurant = props => {
  const initialRestaurantState = {
    id: null,
    name: "",
    address: {},
    cuisine: "",
    reviews: []
  };
  const [restaurant, setRestaurant] = useState(initialRestaurantState);

  const getRestaurant = id => {
    RestaurantDataService.get(id)
      .then(response => {
        setRestaurant(response.data);
        console.log(response.data);
      })
      .catch(e => {
        console.log(e);
      });
  };

  useEffect(() => {
    getRestaurant(props.match.params.id);
  }, [props.match.params.id]);

Snippet from App.js

 <Route path="/restaurants/:id"render={(props) => (
 <Restaurant {...props} user={user} />)}/>

CodePudding user response：

You can use the useParams

...
import { useParams } from 'react-router-dom';
...

...
const params = useParams();

useEffect(() => {
    getRestaurant(params.id);
}, [params.id]);
...

Here is the reference https://reactrouter.com/docs/en/v6/api#useparams

CodePudding user response：

You need to change some part of your code: first, use useParams instead of props.match.params.id:

const params = useParams();
useEffect(() => {
    getRestaurant(params.id);
}, [params.id]);

second, there isn't any render prop on Route component and you should use element instead of render:

 <Route path="/restaurants/:id" element={(props) => (
 <Restaurant {...props} user={user} />)}/>