React Router
Tags: react, javascript, programming, reactjsdevelopment
Published: 2023-05-30 12:09:10


React Router is a popular library used for handling routing in React applications. It provides a way to navigate between different views or pages within a single-page application (SPA) without a full page reload.
In this article, I'll show you how someone can use React router and with example.
First install react router in your project.
```javascript
npm install react-router-dom
``` 
So, after that, create files that you want to navigate.In my case I have 3 files Home, About, and Contact pages.

**Here is my file system in VS**

![File system in vs](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gbi8os8vo5r4dysav97w.png)


![file](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6x7l8xg2sbvljtu356in.png)

Now Here is my files with code.
So my first is header file which always show in top of page

**Header.js**
```javascript
import React from "react";
import { Link } from "react-router-dom";

const Header = () => {
  return (
    <div
      style={{
        display: "flex",
        justifyContent: "space-evenly",
        backgroundColor: "navy",
        color: "white",
        height: "10vh",
        alignItems: "center",
      }}
    >
      <Link id="link" to="/">
        Home
      </Link>
      <Link id="link" to="/about">
        About
      </Link>
      <Link id="link" to="/contact">
        Contact
      </Link>
    </div>
  );
};

export default Header;

```
Above code is simple and straight forward except what Link tag and why we import so, I will tell you but first write all the file code then I explain.

**Home.js**
```javascript
import React from "react";

const Home = () => {
  return (
    <div>
      <h1>Home Page</h1>
    </div>
  );
};

export default Home;

```
 **Contact.js**
```javascript
import React from "react";

const Contact = () => {
  return (
    <div>
      <h1>Contact Page</h1>
    </div>
  );
};

export default Contact;
```
**About.js**
```javascript
import React from "react";

const About = () => {
  return (
    <div>
      <h1>About Page</h1>
    </div>
  );
};

export default About;

```
**App.css**
```css
#link {
  color: azure;
  text-decoration: none;
  font-size: 1.2rem;
}
h1 {
  font-size: 4rem;
  text-align: center;
}

```

Now, Write App.js file need some import files
```javascript
import React from "react";
import "./App.css";
import { Route, BrowserRouter as Router, Routes } from "react-router-dom";
import Home from "./components/Home";
import About from "./components/About";
import Contact from "./components/Contact";
import Header from "./components/Header";
```

**App.js**
```javascript
import React from "react";
import "./App.css";
import { Route, BrowserRouter as Router, Routes } from "react-router-dom";
import Home from "./components/Home";
import About from "./components/About";
import Contact from "./components/Contact";
import Header from "./components/Header";

const App = () => {
  return (
    <div>
      <Router>
        <Header />
        <Routes>
          <Route exact path="/" element={<Home />} />
          <Route exact path="/about" element={<About />} />
          <Route exact path="/contact" element={<Contact />} />
        </Routes>
      </Router>
    </div>
  );
};

export default App;

```

In the above code, we introduced 4 new things 
1. Route
2. Routes
3. Router(BrowserRouter as Router)
4. Link

**Route-** The Route components define the paths and the corresponding components to render when those paths are matched. In the syntax we use element for component name but can different in different version of react-router. We use <u>**"react-router-dom": "^6.11.2"**</u>
syntax- 
```js
<Route path='PATH' element={<ComponentName/>} />
```
>**exact** use for to ensure that a route is only matched if the current location is an exact match to the specified path.

**Router(BrowserRouter)-** the BrowserRouter component is used to provide routing functionality to your application. The as Router part in the import statement BrowserRouter as Router is an optional alias that allows you to use a shorter name (Router) when referring to the BrowserRouter component within your code.

**Routes-** The Routes component is used to define the routes and their corresponding components. In some version <Switch> used instead of <Routes>.

**Link-** The Link component in React Router is used to create navigation links within your application. It provides a way to navigate between different routes without triggering a full page reload.

Now, Here is an Output screenshot

![output 1](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/131it8a0gq7n2foh74e6.png)

![output 2](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/foykuxe4ew6fcyek3kvi.png)

![output 3](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wcpu32j6ql1p2ibgrugs.png)

Overall, React Router is an essential tool for building dynamic and interactive applications with React, providing seamless navigation and rendering based on URL changes.

`Thank you for your time. Feel free to ask any question if you have any doubt, and also you give me suggestion or improve my article.`