Simplifying React Routing

Handling navigation and URLs in React applications can be a daunting task, especially when starting with Create React App (CRA) that lacks built-in page routing. Enter React Router — the simplest and most popular library for simplifying routing in React projects. With its intuitive syntax and extensive community support, React Router empowers developers to effortlessly create dynamic and responsive applications that seamlessly navigate between views, handle URL parameters, and implement complex routing structures. In this article, we will explore the power of React Router and unveil its features, making React routing simpler than ever before.

Include React?Router

To incorporate React Router into your application, follow these steps in your terminal from the root directory of the project:

1. Open your terminal or command prompt and navigate to the root directory of your React application.
2. Install React Router by running the following command. Wait for the installation to complete. This command will download and install the React Router package and its dependencies into your project. Once the installation is finished, you can start utilizing React Router in your application by importing it in your components and setting up routes for your different views.

npm install --save react-router-dom        

Folder Structure

To create an application with multiple page routes, you can start by organizing your file structure in the following way:

1. Assuming you already have a React project and a src folder, create a pages folder that will contain the routing files.
2. The App.js file will be held at the root src?, you can move it pages folder if you wish, just don’t forget changing the paths of the included libraries.
3. Create your new page on pages folder. To simplify, just let’s create a simple file newpage.js on it.

We will have something like

your-app-name/
    src/
      index.js
      index.css
      App.js
      App.css
      components/
        somecomponent.js
    pages/
      newpage.js        

Usage

As the previous React project was already in use, you would probably have something like this in your index.js file?:

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<Pages />);
reportWebVitals();        

In order to enable the router at the app, now just include the react-dom-router library and the routing containers <BrowserRouter>?, <Routes> and <Route>?. You should have something like this?:

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
import { BrowserRouter, Routes, Route } from 'react-router-dom';
import NewPage from './pages/newpage';

function Pages() {
  return (
    <BrowserRouter>
      <Routes>
        <Route exact path='/' element={<App />} />
        <Route exact path='/newpage' element={<NewPage />} />
      </Routes>
    </BrowserRouter>
  )
}

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<Pages />);
reportWebVitals();

export default Pages;        

So App will continue to be accessed by the root path /, but also newpage.js now will be accessed through /newpage?.

That’s it. Hope it’s useful for you.

Rego.