How to Set Up React Router in Your React App From Scratch

How to Set Up React Router in Your React App From Scratch

Setting up React Router is straightforward once you know the steps. Here is how to do it from scratch.

Step 1: Install React Router

Install the package with npm. Use the main react-router-dom package for web apps.

Step 2: Wrap Your App in a Router

At the root of your app, wrap your components in a BrowserRouter. This enables routing throughout the app and connects React Router to the browser history.

Step 3: Define Routes

Inside the router, define Routes that map paths to components. Each Route has a path and an element to render when the path matches.

Step 4: Add Links

Use the Link component for navigation instead of plain anchor tags. Link updates the URL without a full page reload, which is what makes client-side routing work.

Step 5: Add a 404 Page

Add a catch-all route at the end that renders a not-found component when no path matches. This handles invalid URLs gracefully.

Step 6: Use Nested Routes for Layouts

For shared layouts, define a parent route with an Outlet, and nest child routes inside it. The layout renders once, and children render in the Outlet.

The Common Mistake

Forgetting to wrap the app in a Router, or using plain anchor tags instead of Link, which causes full page reloads and breaks the single-page experience.

The Takeaway

Install the package, wrap your app in a Router, define Routes that map paths to components, use Link for navigation, add a 404, and use nested routes for shared layouts. That is the full setup.