Skip to main content

Routing

Before we start​

First of all, what is routing, and why do we need it in React? You know React is a single-page application (AKA SPA). A single-page application means that the application is only one page. For all the code you write in the project, React will convert it to one single page (one HTML file ). That one page is in public/index.html. Single-page application is good for speed, performance, and user experience.

But, if the application is a single page, then how we can navigate between the pages? For example, we have a registration page, login page, home page, etc. How we can navigate between these pages? This is where routing comes into play. Routing is used to navigate between different pages in the application.

Now, let's see how to do routing in React.

Let's start​

As part of this doc, I will create a simple React application. I will create the following pages:

  1. Home page
  2. Register page
  3. Login page

Folder structure:​

This would be the folder structure of the project.

project-folder
├── src
│   ├── index.js
│   ├── App.js
│   └── pages
│       ├── home.jsx
│       ├── register.jsx
│       └── login.jsx
└── package.json
note

I just mentioned the relevant files and folders which we would be creating and modifying in this doc. You can see the complete structure in the code section.

I'll create React components for each page, export the components, import them in the App.js, and then do routing there.

First of all, let's create the pages inside the src/pages folder.

  1. Home page
  2. Register page
  3. Login page

Pages would be simple components. We will just return a div with the page name.

Home page​

src/pages/home.jsx
function Home() {
  return <div>Home page</div>;
}

export default Home;

Register page​

src/pages/register.jsx
function Register() {
  return <div>Register page</div>;
}

export default Register;

Login page​

src/pages/login.jsx
function Login() {
  return <div>Login page</div>;
}

export default Login;

App.js​

I will write the routing code in the App.js file. We need the react-router-dom library to do routing. First of all, let's install it.

npm install --save react-router-dom

Then, I will import the pages and do routing in the App.js file.

src/App.js
// You can see that we are using `BrowserRouter`, `Routes`, and `Route` from the `react-router-dom` library.
import { BrowserRouter, Routes, Route } from "react-router-dom";

// And import pages
import Login from "./pages/login";
import Register from "./pages/register";
import Home from "./pages/home";

// Now let's move to the routing part.
function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<Home />} />
        {/* Here we are saying that if the path is `/` then display the `Home` component.*/}
        <Route path="/login" element={<Login />} />
        {/* Here we are saying that if the path is `/login` then display the `Login` component. */}
        <Route path="/register" element={<Register />} />
        {/* Here we are saying that if the path is `/register` then display the `Register` component. */}
      </Routes>
    </BrowserRouter>
  );
}

export default App;

You see the hierarchy of <BrowserRouter>, <Routes>, and <Route>

In <Route> we have path and element properties. It means where we type this path in the address, this component should display there.

Code​

You can get the complete code from here

Conclusion​

In this doc, we learned how to do routing in React. We used the react-router-dom library to do routing. We created three pages and did routing in the App.js file.