Good [React Router](/courses/reactjs) architecture keeps URL structure meaningful, navigation semantic, and authentication secure without making routing unnecessarily complicated. ### 1. Use Link or NavLink for Internal Navigation Prefer: ```jsx Courses ``` instead of using a normal anchor for ordinary client-side navigation: ```jsx Courses ``` A normal document navigation can reload the application, while [React Router](/courses/reactjs) links participate in client-side routing. ### 2. Use NavLink When Active State Matters For navigation menus: ```jsx isActive ? "active" : "" } > Courses ``` is clearer than manually comparing the URL for every navigation item. ### 3. Use useNavigate for Programmatic Navigation Good use case: ```jsx await login(); navigate("/dashboard"); ``` Do not replace every normal link with: ```jsx onClick={() => navigate("/page")} ``` without a reason. ### 4. Choose Route Params and Query Strings Intentionally Use route parameters when the value identifies the resource: ```text /articles/react-hooks /products/123 ``` Use query strings for optional view state: ```text /products?category=laptop&sort=price&page=2 ``` ### 5. Use Nested Routes for Shared Layouts Instead of repeating the dashboard sidebar across: ```text /dashboard /dashboard/profile /dashboard/settings ``` use a parent dashboard route with an `Outlet`. ### 6. Do Not Forget Outlet for Nested UI Child routes need somewhere to render: ```jsx function DashboardLayout() { return ( <> ); } ``` ### 7. Keep URLs Meaningful Prefer: ```text /courses/react /articles/react-hooks /users/123 ``` over route structures that expose implementation details without meaning to users. ### 8. Do Not Treat Frontend Protected Routes as Security This: ```jsx user.role === "admin" ``` can control whether an admin route appears, but your server must independently verify the user's permissions before returning protected information or changing data. ### 9. Handle Authentication Loading Separately Avoid this logic: ```text user is currently null → immediately redirect ``` if the application is still restoring an authenticated session. Use separate states such as: ```text loading authenticated unauthenticated ``` when appropriate. ### 10. Prefer URL State for Shareable Navigation State Search filters and pagination often benefit from URLs such as: ```text /courses?search=react&page=2 ``` rather than existing only in temporary component state. This can make the page easier to refresh, bookmark, share, and navigate using browser history. ### 11. Avoid Hardcoding Full Paths Everywhere Nested routes support relative navigation where appropriate. For example, a component already inside `/dashboard` may link to: ```jsx Settings ``` rather than repeatedly coupling itself to the entire absolute route structure. ### Practical Mental Model ```text Need a page? → define a route Need shared route layout? → nested route + Outlet Need resource identity in URL? → route param Need filtering/search/pagination? → query string Need normal navigation? → Link/NavLink Need logic-driven navigation? → useNavigate Need restricted access? → route guard + real server authorization ``` ### Interview-Ready Answer React Router best practices include using `Link` or `NavLink` for semantic client navigation, `useNavigate` for programmatic transitions, nested routes with `Outlet` for shared layouts, dynamic parameters for resource identity, and query strings for optional URL state. Protected routes should improve the client experience, while real authentication and authorization must still be enforced by the backend.