How to rewrite such code on React Router V6?

Question

React

There is such a code using the render function. In v6 react-router, these functions and component have been replaced with element . How then to rewrite this code to the new standard?

Now the console is getting an error: " Matched leaf route at location "/users/4" does not have an element. This means it will render an with a null value by default resulting in an "empty" page ."

The code:

<Route path='/users/:id' render={({match, location, history}) => {
                       const { id } = match.params;
                       return <UserDetails userId={ id } />}}/>

Answer 1

import { Routes, Route, useParams } from 'react-router-dom';

const UserDetailsPage = () => {
  const { id } = useParams();
  return <UserDetails userId={ id } />}}/>
}

<Route path='/users/:id' element={<UserDetailsPage />}/>