React Router uses a declarative, component-based approach to routing. What that means is when you want to create a new route, you render a Route component. Route allows you to map URL paths to different React components. For example, say we wanted to render a Dashboard component whenever a user navigates to the /dashboard path. To do that, we'd render a Route that looked like this.
<Route path="/dashboard" element={<Dashboard />} />
Now, what if we also wanted to pass the Dashboard component a prop?
In previous versions of React Router (v4), this was non-trivial since React Router was in charge of creating the React element. To get around this, you'd have to use Routes render prop.
// React Router v4<Routepath="/dashboard"render={(props) => <Dashboard {...props} authed={true} />}/>
However, with React Router v6, since you're in charge of creating the element, you just pass a prop to the component as you normally would.
<Route path="/dashboard" element={<Dashboard authed={true} />} />
