React Routing Guide: A quick Start & Installation

Routing is very crucial aspect when building Web Applications that require Navigation and Dynamic routes. React Router is one of the very best with React Js. Let's go ahead to install react router in our application.


Firstly make sure you have created a React Js Application. To do that simply type down the command on your shell or bash

npx create-react-app demo-app 
cd demo-app

The second command which is cd simply means that we move into that folder containing all the project files for our react js application to run effectively. Now let's move on to install react router

npm install react-router-dom

Here is a React Router Navigation example with some React Components

import React from"react";
import{
BrowserRouter as Router,
Switch,
Route,
Link
} from "react-router-dom";

export default function App(){
return(
<Router>
<div>
<nav>
<ul>
<li>
<Link to="/">Home <Link>
<li>
<li>
<Link to="/about">About <Link>
<li>
<li>
<Link to="/users">Users <Link>
<li>
<ul>
<nav>

{/* A looks through its children s and
renders the first one that matches the current URL. */
}
<Switch>
<Route path="/about">
<About/>
Route>
<Route path="/users">
<Users/>
Route>
<Route path="/">
<Home/>
Route>
<Switch>
<div>
<Router>
);
}

function Home () {
return<h2>Home <h2>;
}

function About(){
return<h2>About <h2>;
}

function Users () {
return<h2>Users <h2>;
}

Now run your application and everything should work fine!