React Routes for Beginners

Today We learn how to manage React Route with using React-Router

Let’s Start

First, create a new React project with it.

npx create-react-app protect-routes
cd protect-routes
npm start

Now Install React Router

npm install react-router-dom

Then let’s create UI:

src/App.js

Output:

Now configure path

Step one: First You’ll need to import BrowserRouter, Route, and Switch from “react-router-dom” in App.js

import {
BrowserRouter as Router,
Switch,
Route,
} from “react-router-dom”;

import from react-router-dom

Step two: Now in return all Components who have a route wrapped with Router.

Then in Router element add the Switch element

and Next Wrapped every component with Route element and set path using to=” /yourPath’’

The Final Code is …

Output:

Check React-Router to learn more