Using React Router for Navigation

Hey everyone! Now that you’ve got your React project up and running, it’s time to add some navigation. In this post, I’ll show you how to use React Router to create a seamless navigation experience for your single-page application (SPA). React Router is a powerful library that helps you handle routing in your React apps with ease.

What is React Router?

React Router is a standard library for routing in React. It enables the navigation among views of various components in a React Application, allows changing the browser URL, and keeps the UI in sync with the URL.

Before you start, make sure you have a React project set up. If you haven’t done that yet, check out my previous post on How to Create a React Project from Scratch Using Vite.

Step 1: Installing React Router

First, we need to install React Router. Open your terminal in the root directory of your React project and run the following command:

npm install react-router-dom

Step 2: Setting Up the Router

After installing, we need to set up the router in our application. Open src/main.jsx (or src/index.jsx if you named it differently) and wrap your app with BrowserRouter from react-router-dom.

import React from 'react';
import ReactDOM from 'react-dom/client';
import { BrowserRouter } from 'react-router-dom';
import App from './App';
import './index.css';

ReactDOM.createRoot(document.getElementById('root')).render(
  <BrowserRouter>
    <App />
  </BrowserRouter>
);

Step 3: Creating Routes

Now, let’s create some routes. We’ll modify src/App.jsx to include Routes and Route components. These components help define different paths and the corresponding components that should be rendered.

First, let’s create some new components that we’ll navigate to. Create two new files in the src directory: Home.jsx and About.jsx.

// src/Home.jsx
import React from 'react';

function Home() {
  return (
    <div>
      <h1>Home Page</h1>
      <p>Welcome to the Home Page!</p>
    </div>
  );
}

export default Home;

// src/About.jsx
import React from 'react';

function About() {
  return (
    <div>
      <h1>About Page</h1>
      <p>This is the About Page.</p>
    </div>
  );
}

export default About;

Next, update src/App.jsx to include routes for these components.

import React from 'react';
import { Routes, Route, Link } from 'react-router-dom';
import Home from './Home';
import About from './About';

function App() {
  return (
    <div className="App">
      <nav>
        <ul>
          <li>
            <Link to="/">Home</Link>
          </li>
          <li>
            <Link to="/about">About</Link>
          </li>
        </ul>
      </nav>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
      </Routes>
    </div>
  );
}

export default App;

Step 4: Navigating Between Pages

In the code above, we use the Link component from react-router-dom to create navigation links. When you click on these links, React Router updates the URL and renders the corresponding component without reloading the page.

Step 5: Adding a 404 Page

To handle unknown routes, you can add a catch-all route that displays a 404 page. Create a new component NotFound.jsx:

// src/NotFound.jsx
import React from 'react';

function NotFound() {
  return (
    <div>
      <h1>404 - Not Found</h1>
      <p>The page you are looking for does not exist.</p>
    </div>
  );
}

export default NotFound;

Then, update your routes in App.jsx to include this component:

import React from 'react';
import { Routes, Route, Link } from 'react-router-dom';
import Home from './Home';
import About from './About';
import NotFound from './NotFound';

function App() {
  return (
    <div className="App">
      <nav>
        <ul>
          <li>
            <Link to="/">Home</Link>
          </li>
          <li>
            <Link to="/about">About</Link>
          </li>
        </ul>
      </nav>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
        <Route path="*" element={<NotFound />} />
      </Routes>
    </div>
  );
}

export default App;

Conclusion

And that’s it! You’ve successfully set up React Router in your application and created a basic navigation system. You can now easily add more routes and components as your application grows. React Router makes it straightforward to manage different views in your React app without the need for full page reloads, providing a smoother and faster user experience.

If you have any questions or run into any issues, feel free to leave a comment below. Happy coding!