How to pass data between sibling components using React router?

In React Router, you can pass data from one route (component) to another by encoding it in the location state or URL parameters. Sibling components—being separate routes under the same parent—can share data this way without lifting state all the way up.

1. Location State 📦

   • When you navigate (via <Link> or useNavigate), you can include a state object:

     JS

   • The target component uses useLocation() to read location.state.foo.

2. URL Parameters 🔗

   • Include dynamic segments in your path (/user/:id) or query strings (?id=123), then read them via useParams() or useSearchParams().
   • Best for data that’s bookmarkable or shareable.

3. When to Use Which 🎯

   • Location state is great for transient UI data (e.g., “item just clicked”).
   • URL params/query are ideal for deep links and reload-persistent data.