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!

--

--

--

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

JavaScript Array Methods for All

Functional Programming in JavaScript (Part-1)

JavaScript Interview Preparation

Angular 11 + Tailwindcss 2.0 = Blazing Fast 🔥

What is the difference between ng build and ng serve?

this of JavaScript.

Do You Really Need To Use React.js?

Winston: A Better Way To Log

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Tre'von Mitchell

Tre'von Mitchell

More from Medium

Simple And Easy Login Screen Integration

How to easy handle mono-repo projects 😃?

Lerna, a tool to manage Node.js Projects with multiple packages

Clean Code: Tips to Keep Your Code Clean

JavaScript, NoSQL and MongoDB