Introduction to React Router and Setting Up Simple Routes

Published by : Code Crafts Campus
July 26, 2024

Introduction to React Router and Setting Up Simple Routes

Welcome to our tutorial series on building a Job Board application using React Router! In this blog post, we’ll cover the basics of routing in single-page applications (SPAs), explain the importance of routing, and guide you through the setup process of a React project with react-router-dom. We’ll also dive into creating simple routes and navigation for our application.

Part 1: Introduction and Installation of React Router

What is Routing?

Routing is essential for single-page applications (SPAs). It enables navigation between different views or pages without needing to reload the entire page, providing a seamless user experience. By managing different URLs within the app, routing also allows for deep linking, making it possible for users to bookmark specific pages.

Why is Routing Important in SPAs?

Routing enhances the user experience by:

Managing different URLs within the app.
Enabling deep linking and bookmarking.
Facilitating dynamic content loading, making the app feel faster and more responsive.

Introduction to `react-router-dom`

react-router-dom is a popular library for routing in React applications. It provides various components and hooks for handling routing. It’s easy to set up and integrate with your existing React app, making it a go-to solution for many developers.

Setting Up the Project

Before we dive into code, ensure you have Node.js and npm installed on your machine. If you haven’t already set up a React project, you can do so using create-react-app. Here’s how you can get started:

				
					npx create-react-app job-board-app
cd job-board-app

Installing `react-router-dom`

With our project set up, we can now install react-router-dom. Open your terminal and run the command:

				
					npm install react-router-dom

Or, if you’re using yarn:

				
					yarn add react-router-dom

Once installed, you can verify it in the package.json file under dependencies.

Basic Project Structure

After installation, let’s take a quick look at the basic project structure created by create-react-app. The most important folder is the src folder, where we’ll spend most of our time. Key files to note are App.js, index.js, and App.css.

Part 2: Creating Simple Routes and Navigation

Setting Up Router

First, let’s set up Router. We need to import BrowserRouter from react-router-dom and alias it as Router. Then, we wrap our main App component with Router to enable routing throughout our application.

				
					import { BrowserRouter as Router } from 'react-router-dom';

function App() {
  return (
    <Router>
      <div className="App">
        {/* Other components */}
      </div>
    </Router>
  );
}
export default App;

Creating Simple Routes

Next, we’ll create simple routes. Import Routes and Route from react-router-dom, and define routes for our Home and About pages.

				
					import { Routes, Route } from 'react-router-dom';

function App() {
  return (
    <Router>
      <div className="App">
        <Routes>
          <Route path="/" element={<Home />} />
          <Route path="/about" element={<About />} />
        </Routes>
      </div>
    </Router>
  );
}
export default App;

Home Component

Let’s create a simple Home component. This component will display some basic content.

				
					function Home() {
  return <h1>Home Page</h1>;
}
export default Home;

About Component

Similarly, we’ll create an About component with some basic content.

				
					function About() {
  return <h1>About Page</h1>;
}
export default About;

Adding Routes to App Component

Now, we’ll integrate the Routes and Route into the App component, mapping the Home and About components to their respective routes.

				
					import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
import Home from './Home';
import About from './About';

function App() {
  return (
    <Router>
      <div className="App">
        <Routes>
          <Route path="/" element={<Home />} />
          <Route path="/about" element={<About />} />
        </Routes>
      </div>
    </Router>
  );
}
export default App;

Navigating via URL

With our routes set up, we can now navigate between them by entering the URLs directly in the browser. For example, / for the Home page and /about for the About page.

Handling Wildcard Routes

To handle undefined routes, we can add a wildcard route using *. This will catch all undefined routes and display a NotFound component.

				
					import NotFound from './NotFound';

function App() {
  return (
    <Router>
      <div className="App">
        <Routes>
          <Route path="/" element={<Home />} />
          <Route path="/about" element={<About />} />
          <Route path="*" element={<NotFound />} />
        </Routes>
      </div>
    </Router>
  );
}
export default App;

NotFound Component

Finally, let’s create a simple NotFound component that displays a message for undefined routes.

				
					function NotFound() {
  return <h1>Page Not Found</h1>;
}
export default NotFound;

We hope this tutorial helps you get started with React Router and building your Job Board application. Happy coding!

Introduction to React Router and Setting Up Simple Routes