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>
);
}
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.