A Quick Guide to React Router DOM

Board Infinity -

React Router DOM

The process of routing involves the direction of a user to a different page based on their actions. One of the most frequent uses of ReactJS Router is for developing Single Page Web Applications. The application uses React Router to define multiple routes.

React Router is a standard library system that allows users to create routing within React applications using the React Router package. It creates the synchronous URL on the browser with web page data.

The main use of this framework is to develop single-page web applications that maintain application structure and behavior. React Router plays a crucial role in displaying multiple views, In a single page application. A React application cannot show multiple views without React Router.

Many social media websites like Facebook and Instagram render multiple views using React Router.

Quick Start

React Application Setup:

Create a React app using create-react-app and name it boardinfinity.

You can use the following command to create react application

npx create-react-app boardinfinity


React Router Installation

There are three different routing packages in React. These are:

react-router:

React Router applications rely on it for core routing components and functions.

react-router-native:

It is useful for mobile applications.

react-router-dom:

It is useful for designing Web applications.

Directly installing react-router in your application is not possible. The first step to using react routing is to install react-router-dom modules in your application. Installing react-router dom is as simple as running the following command.

$ npm install react-router-dom

Creating a few pages in the react application will help us learn how to use React Router. Within your src folder, create a folder called pages and add two files named home.js and about.js.

Home.js

import React from 'react';

function Home (){
 return <h1>Where Career Transitions Takes Place!</h1>
}

export default Home;

About.js

import React from 'react';
 
function About () {
    return <div>
        <h2>Board Infinity is a one-stop solution to all your career needs. </h2>
 
        Read more about us at :
        <a href="https://bi-team.addpotion.com/about-us">
            About Us
        </a>
    </div>
}
export default About;

In the app.js file, add all the necessary components. This is what app.js will look like

import React, { Component } from 'react';
import { BrowserRouter as Router,Routes, Route, Link } from 'react-router-dom';
import Home from './component/home';
import About from './component/about';


class App extends Component {
render() {
 return (
 <Router>
 <div className="App">
 <ul className="App-header">
 <li>
 <Link to="/">Home</Link>
 </li>
 <li>
 <Link to="/about">About Us</Link>
 </li>
 </ul>
 <Routes>
 <Route exact path='/' element={< Home />}></Route>
 <Route exact path='/about' element={< About />}></Route>
 </Routes>
 </div>
 </Router>
);
}
}

export default App;

write your code here: Coding Playground

After saving and running your application it will open new browser window which will look like this.

And our About Us page will look like this

Conclusion

This collection of examples should help you get a feel for how React Router creates navigation. Read on to discover what React Router is made up of!