React JS and DRF- Routing with React JS

In this blog, I am explaining how to create routes with React Js. To know the basics of React Js, do visit my previous blog.

Cover Image

To perform routing in React JS, the React Router is being used. This is a dynamic and client-side routing library that allows us to navigate to different pages without refreshing. React router uses the component structure.

1. Creating a React Application

So let’s start creating our app. Just create a Simple React application and make sure your server runs well.

npx create-react-app my-app
cd my-app
npm start

The above command creates and starts the server. Once created you must see the default welcome page of React.

Default Welcome Page of React

2. Installing React Router

Now let’s install the React Router. As said earlier, React Router is a library build upon React js for navigation within pages.

$ npm install react-router-dom
$ npm start

The above command will install the React router to your project.

3. Creating Different Pages

Now for the demonstration, I am just creating three components. I am creating three-class components under a folder Pages.

src/Pages/Home.js

import React, { Component } from 'react'
export default class Home extends Component {
    render() {
        return (
            <div>
                Home Page
            </div>
        )
    }
}

src/Pages/About.js

import React, { Component } from 'react'
export default class About extends Component {
    render() {
        return (
            <div>
                About Page
            </div>
        )
    }
}

src/Pages/Portfolio.js

import React, { Component } from 'react'
export default class Portfolio extends Component {
    render() {
        return (
            <div>
                 Portfolio Page
            </div>
       )
    }
}

The folder structure must be like this.

Folder Structure of my React App

4. Creating Routes in App.js

Let’s start creating out the router. Here just by importing the react-router-dom library, we can perform routing. Make these routes in the main file.

src/App.js

import React from 'react';
import logo from './logo.svg';
import './App.css';
import { Route, Switch ,Link, BrowserRouter as Router } from 'react-router-dom';
import Home from './Pages/Home';
import About from './Pages/About';
import Portfolio from './Pages/Portfolio';
function App() {
    return (
        <Router>
          <div>
            <ul>
              <li>
                <Link to="/">Home</Link>
              </li>
              <li>
                 <Link to="/about">About</Link>
              </li>
              <li>
                 <Link to="/portfolio">Portfolio</Link>
              </li>
            </ul>
            <Switch>
              <Route exact path="/" component={Home} />
              <Route path="/about" component={About} />
              <Route path="/portfolio" component={Portfolio} />
            </Switch>
          </div>
        </Router>
    );
}
export default App;

Now, just navigate to the URLs created above. You should see the components being called.

Routing

5. Error Handling

When calling some garbage URL, the above code return noting. To handle this one, I am creating another file named 404.js in the Pages folder.

src/Pages/404.js

import React, { Component } from 'react'
export default class NotFound extends Component {
    render() {
        return (
            <div>
                404 Error. Page Not Found
            </div>
        )
    }
}

Now without mentioning the path, just call the NotFound component. This makes React to understand that if a garbage URL has been called, return 404.js component.

src/App.js

<Switch>
   <Route exact path="/" component={Home} />
   <Route path="/about" component={About} />
   <Route path="/portfolio" component={Portfolio} />
   <Route component={NotFound} />
</Switch>

Error Handling

In my next blog, I am explaining how to style a component in React JS. Stay Connected.

Feel free to contact me for any queries.

Email: sjlouji10@gmail.com

Linkedin: https://www.linkedin.com/in/sjlouji/

Happy coding…