Navigation with React Router

React Router is a simple library of React inside web app for handling routes. Here we will learn Navigation with React-Router.

---

Basic routing with react-router-dom

Let's see these two Components.

const PageOne = () => {
    return (
        <>
           <h1>Content One</h1>
        </>
    )
}

const PageOne = () => {
    return (
        <>
           <h1>Content Second</h1>
        </>
    )
}

Now importing some components from react-router-dom

import { BrowserRouter, Route } from 
"react-router-dom"

BrowserRouter

BrowserRouter is the router implementation for HTML5 browsers.

Route

The route is the conditionally shown component based on matching a path to a URL.

Now inside App component wrap <Route /> inside <BrowserRouter

const App () => {
    return (
        <>
          <BrowserRouter>
            <Route path="/" exact component={PageOne} />
            <Route path="/two" exact component={PageTwo} />
          </BrowserRouter>
        </>

    )
}

Route component has two props "path" and, "component" path as the name says it contains the path for the component to be rendered and the component contains that particular component to render on the route.

Don't use <a> tag for navigation ⚠

We'll use the component we have used earlier

const PageOne = () => {
    return (
        <div>
           <h1>Content First</h1>
           <a href="/two">Content Second</a>
        </div>
    )
}

const PageTwo = () => {
    return (
        <div>
           <h1>Content Second</h1>
           <a href="/one">Content Second</a>
        </div>
    )
}

Now what we have seen in the above two snippets, we gonna repeat in our App component.

const App = () => {
    return (
        <BrowserRouter>
           <Route path="/" exact component={PageOne} />
           <Route path="/two" exact component={PageTwo} />

    )
}

Why you shouldn't use <a> tag for navigation?

If you run this code it will work as expected, then why not use it?
So let's see why not use the anchor tag. You add <a> tag to your web app with href="/two" and click on it. And your browser requests localhost:3000 and gets the response from a server with an index.html file.

The browser receives HTML file and dumps old HTML file including all your react state data. And it's along going to dump all of the JS code and all the JS variables and data inside of your web app.

Now that is why we don't want to use an anchor tag inside the React Router Navigation.

Hence, this was the problem of the anchor tag.

---

Let's see the solution to this anchor tag problem.

Now let us import the Link component from 'react-router-dom'

import { BrowserRouter, Route, Link } from 'react-router-dom'

The link provides declarative, accessible navigation around your application.
Let's see these components

const PageOne = () => {
    return (
        <div>
          <h1>Page First</h1>
          <Link to="/two">Page Second</Link>
        </div>  
    )
}

const PageOne = () => {
    return (
        <div>
          <h1>Page Second</h1>
          <Link to="/">Page First</Link>
        </div>  
    )
}

Now the component will look like this.

const App = () => {
    return (
        <BrowserRouter>
          <Route path="/" exact component={PageOne} />
          <Route path="/two" component={PageTwo} />
        </BrowserRouter>  
    )
}

When we will click on the links you'll notice that the application is not reloading at all.
Also, there will be no additional requesting being made.

---

🚙Thanks For Reading🚕

Comments

[Pawan Pawar]

These are awesome!