Navigation with React Router
Tags: webdev, react, programming
Published: 2021-03-25 02:38:55


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. 

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

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

Now importing some components from `react-router-dom`

```javascript
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`

```javascript
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

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

```javascript
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. 

```javascript
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'** 

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

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

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

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

Now the component will look like this. 

```javascript
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🚕


<a href="https://buymeacoffee.com/rahxuls" target="_blank">
<img src="https://cdn.hashnode.com/res/hashnode/image/upload/v1616209806065/A24KTdOi6.png?auto=compress">
</a>