Play With the React 🐘Router
Tags: react, javascript, beginners, webdev
Published: 2018-06-01 01:04:12

---
title: Play With the React 🐘Router
published: true
description: how routing works in react router
tags: react,javascript,beginners,webdev
cover_image: https://cdn.pixabay.com/photo/2015/01/08/18/24/children-593313_960_720.jpg
---


**Play with  the React-Router-Dom.**

# What is a React Router?

React Router Helps us to do routing in React apps and everything is a Component-Based in React Router.


#### Is it Dynamic or Static Routing?

- Dynamic Routing.

### What are the  Requirements to implement the Routing in React Apps?

- First, we need to install Package Called *react-router-dom*.

```
npm i -s react-router-dom

```

# Let's play now.


create a routes.js file in your src directory like i shown in the below image.

![](https://thepracticaldev.s3.amazonaws.com/i/r5fw2gkrqiwema66oqka.png)


In the routes.js file, we need to import the React and Routing Components.

![](https://thepracticaldev.s3.amazonaws.com/i/0c7zn0bbh0wojnp8expo.png)

Then we need to import the components which they need routing.

![](https://thepracticaldev.s3.amazonaws.com/i/nvptj8trf6w397j1op33.png)

Like in above image i imported the App component and Posts Component.


Let's define a new Component with Routes.

![](https://thepracticaldev.s3.amazonaws.com/i/b4k89mgbcgc4ebqdm3vn.png)


What is the above code .....

I think it looks like very Interesting.

**Link:**  Link component helps to define the navigation.
**Route:** Route Component helps to define the Routing.
**exact:** Please Load exactly App Component when my URL is **/**

Above all, we need to Wrap the Router Component.

that's it we are done with routing.

Now in your index.js, we need to add these Routes Component.

![](https://thepracticaldev.s3.amazonaws.com/i/27osuxxqwaq3q65gk68u.png)


Open Your App.js file or a Component which you used in routing add console.log(this.props) to the code like in the below image. 

![app.js](https://thepracticaldev.s3.amazonaws.com/i/nzu5diah1l7x0kphek10.png)


Now run your dev server.

Have you seen anything in your Browser console?

![](https://thepracticaldev.s3.amazonaws.com/i/uur51kh6mzbxm3v928d3.png)

##### There is an object available in our component.

## who gives us  this object? 

The answer is React router passes the Object to our Component whenever we declare routes for that component.

For example, we defined the routes for App component and Posts Component.so that these Components are Now Aware of these Object in the Above image.


## Programmatically navigate with React Router.

The Name tells the How to Navigate Programmatically it means Navigate me to the Some route whenever a program runs or some event happens.

For example when submitting a form.

I have already shown there is a history property available.

We can even be done with Other Ways But I'm showing with the help of history property.

![](https://thepracticaldev.s3.amazonaws.com/i/0mbb75p2oid4qhuea9y0.png)


Final Output.

![](https://thepracticaldev.s3.amazonaws.com/i/1rn4r8etyk2m4bc2nl90.gif)

### [Play with React Router Part-2](https://dev.to/saigowthamr/play-with-react-router-part-2-4i8m)

Happy coding...

[React router beginners guide](https://reactgo.com/reactrouter)