Routing With React And Understanding Routers.

What is Routing?

Are you new to React and wondering what all you can do with React? Well in this article I will talk about some basics about React Router and routing. In React, we can make our application let us or users move to different parts or components when a user enters a URL or click on any links, button, icon, or images. We can show different pages to users with our application when using React Routers. In order to add routers to your application, you will need to use the React-Router library. React does not come with routing itself so it is a must to add the library. The React-Router library comes with three variants.

1. React-Router: Core Library

2. React-Router-DOM: One of the variants of the main core library for web applications.

3. Router-Router-Native: One of the variants of the main core library, used with react native for Android and IOS applications

To use the react-router library, install using this command:

npm install react-router-dom

The Routers.

After installing you will have a number of routers in the react-router package.

1. BrowserRouter: A dynamic server that knows how to handle any type of URL.
2. HashRouter: used for static websites with a server that only responds to requests for files that it knows about.

Route Component.

In the React Router package, the Route component renders the user interface when the current location matches the route’s path.

Path: A prop on the Route component that tells or represents the pathname that the route should match. Basically any valid URL path or even an array of paths.

<Route path=”/books”/>

So when a path is matched, a React component should be rendered, whenever there’s a change in the UI.

This component also takes in a render prop and a children prop.

Render: This is a prop that will display any content whenever the route is reached. It takes a function that will return a React element.

Children: A prop that takes a function and will render a React element whether the path matches the location or not. It’s just like the Render prop but it will get called whether there is a match or not.

Switch Component.

In the react-router library, the react-router package also has a Switch component that is used to wrap and hold multiple Route components. It only will pick the first matching route of all its children routes.

<Route 
 path=”/books” 
 render={() => (<div><em>List of Books</em></div>)}
/>
<Route 
 path=”/books/9" 
 render={() => (<div> Book with id of 9</div>)}
/>

The Switch component makes sure that only one route shows at any one time. All of your routes go inside the Switch component.

The number of pages you want for the user to travel in your application, the same amount of routes you will have.

Remember for the Path prop, it is basically the route. So whatever page you want the user to see you will give the name of that page or route. So if you wanted to do an ‘about’ page it will look like this.

<Route path"/about"> </Route>

In the example below is a Switch component with a couple of Route components that we want to use for our application.

<Switch>
  <Route 
    path=”/books” 
    render={() => (<div><em>List of books</em></div>)}
  />
  <Route 
    path=”/books/about" 
    render={() => (<div>Books Are Fun!</div>)}
  />
</Switch>

So here, when we go to our browser and application, and we navigate to /books/about, both of the Routes we created will be rendered to the page.

List of books
Books Are Fun!

Why is this? Because basically, the root path above is also a match for /books/about, and when we have things that might be sub-routes of each other you need to mark them as exact like the example below.

<Route exact path="/books/about" />

This is all I have for React Routers and routing with React, I hope this article was helpful and understanding when you start using routers with React. There are more to discuss like using Link components that are used to navigate different parts of an application, make sure to research that as well. Thank you!