My current Home component snippet is:
function Home() {
return (
<div>
<AddTaskForm
ailDivision={ailDivision}
ascDivision={ascDivision}
apcDivision={apcDivision}
/>
<UpdateTaskForm
ailDivision={ailDivision}
ascDivision={ascDivision}
apcDivision={apcDivision}
/>
<EtaFetch />
</div>
);
}
export default Home;
But I want these components to have individual routes, using react-router-dom like:
function Home() {
return (
<div>
<Routes>
<Route path="/addtask" exact element={<AddTaskForm/>} />
<Route path="/updatetask" exact element={<UpdateTaskForm/>} />
<Route path="/etafetch" exact element={<EtaFetch/>} />
</Routes>
</div>
);
}
My question is: How do I pass props to the Route components in the second snippet?
The routed components are rendered as JSX, so passing props works as normal in React.
Example:
function Home() {
return (
<div>
<Routes>
<Route
path="/addtask"
element={(
<AddTaskForm
ailDivision={ailDivision}
ascDivision={ascDivision}
apcDivision={apcDivision}
/>
)}
/>
<Route
path="/updatetask"
element={(
<UpdateTaskForm
ailDivision={ailDivision}
ascDivision={ascDivision}
apcDivision={apcDivision}
/>
)}
/>
<Route path="/etafetch" element={<EtaFetch />} />
</Routes>
</div>
);
}