Before reading this blog learn about what is react and why react?, hello world, React DOM, JSX, Component and props

How To Do Basic Routing In React Using React Router Dom

To do basic Routing in react we use React Router Dom. This library has both web and native variants. Right now, as we are learning for web, we use {BrowserRouter} from “react-router-dom”.

Let’s get into coding. create a basic app using create-react-app tryrouting ( I named it as tryrouting) once you have done it. make a folder structure like this (it’s better to follow convention)

Copy 
1src
2    -   stylesheet
3    -   components
4            -   App.js
5            -   Articles.js
6            -   Home.js
7    -   index.js   // inside src folder but outside component folder

Now, open your index js. before writing the code install React Router Dom using npm i react-router-dom

To do Routing in App component we are making BrowserRouter as App component parent, as App component is our main component. that’s why in index.js, we wrapped the App component inside the BrowserRouter while rendering

Copy 
1// index.js
2import  React  from  'react';
3import  ReactDOM  from  'react-dom';
4
5// we have to import BroswerRouter for web routing
6import { BrowserRouter } from  'react-router-dom';
7
8// import your App component here
9import  App  from  './components/App';
10
11//
12ReactDOM.render(
13    <BrowserRouter>
14        <App  />
15    </BrowserRouter>,document.getElementById('root'));

Now inside App component which App.js

We are importing {Router} from “react-router-dom” to handle the routes. inside the <Router> you have to add a path="" for the particular route and the component you want to show and also we are giving exact inside <Router> to make the path exact and not to render remaining components inside the App. <Route exact path="/" component={Home}></Route. here, below we have given two components Home and Article as we have two components.
here we made a Home page on ”/” route and Article page on “/article” route

Copy 
1//App.js
2
3import  React  from  'react';
4import { Route} from  'react-router-dom';
5import  Home  from  './Home';
6import  Article  from  './Article';
7export  default  function  App() {
8    return (
9        <>
10        <Route  exact  path="/"  component={Home}></Route
11        <Route  exact  path="/article"  component={Article}></Route>
12        </>
13    );
14}

Inside Home component that is Home.js We are basically rendering two words one is Home inside <h1> and Article inside <Link> In the browser, we can see Home and Article ( which link to Article page). To link page from one page here we are using <Link> which works a <a> tag by preventing its default nature. To use <Link> we have to import {Link} from “react-router-dom”. In browser, we can view Home page and article and if you click on the article, it takes you to article page and route is “/article” and by home page is on ”/”

Copy 
1//Home.js
2
3import  React  from  'react';
4import { Link } from  'react-router-dom';
5export  default  function  Home() {
6    return (
7        <>
8            <h1>Home Page</h1>
9            <Link  to="/article">Article</Link>
10        </>
11    );
12}

Inside Article component that is Article.js we have given <h1> for Article and <Link> to Home page

Copy 
1//Article.js
2
3import  React  from  'react';
4import { Link } from  'react-router-dom';
5export  default  function  Article() {
6    return (
7        <>
8            <h1>Article Page</h1>
9            <Link  to="/">Home</Link>
10        </>
11    );
12}

Now, we can check our tryrouter app inside the browser which linked to two pages one is Home which runs on ”/” route and another one is Article on “/article” route and we can navigate to both the pages either by clicking on the home and article tags or by entering particular URL