Vivekk
Vivekk

Reputation: 25

Pass props to child component through Route in react-router-dom in Function Component

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?

Upvotes: 1

Views: 1455

Answers (1)

Drew Reese
Drew Reese

Reputation: 202605

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

Upvotes: 1

Related Questions