How to pass Data From React Router through props? I am unable to do it

Question

Hey I am Practicing a contact List in React The problem i am facing I am unable to pass props in react router with route it work fine but when i Try to render it through React Router i got nothing

   function App(){
const[contactdata,setcontactdata]=useState(GetLocaldata());
  return (
 
 <div className="ui container App">
{/* <Header/>
<AddContact  AddChangeHandler={AddChangeHandler} />
<Contactlists Contact={contactdata} deletehandler={deletehandler} /> */}

<Router>
<Header/>
<Routes>
<Route path="/" render=
{(props)=><Contactlists {...props} 
Contact={contactdata} deletehandler={deletehandler} /> }
/>
<Route path="/add" render=
{(props)=><AddContact {...props}  AddChangeHandler={AddChangeHandler}/>} />
<Route path="/de" element={<ContactDetail/>} />
 </Routes>
 </Router>
   </div>
   );

 
}

Answer 1

In previous versions of react-router-dom you'd have to use Route 's component render prop to pass in props because React router dom was in charge of creating the React element. However, since RRDv6 (which I assume is the version you're using) you just need to pass the props as you normally would:

<Route path="/your-path" element={<YourComponent someProp={someProp} />} />

Let me know if that helps you.