React Routing

What is Routingl

Routing enables navigation from one view to another in a web application based on action or request. It is the ability to move from one page to another when a user click some element like link, button, icon, image, and so on within the application.

In other words, it is a process in which a user is directed to different pages based on their action or request.

React Router on the other hand, is used to create various routes in a single-page application. It is the standard routing package used in react to change views and move between pages.

For instance, when a user types a specific URL into the browser, the user is redirected to that particular route if the URL path matches any route inside the router file with the help of react router without the browser reloading.

To make use of React Router, we will need to use a package called React-Router-DOM. We will look at that in the next section.

What is React Router DOM

Now that we have a basic understanding of React Router, let’s take a cursory look at the React-Router-DOM. The React Router DOM is the node module that is specific to routing in web applications as opposed to mobile.

It allows engineers to create routes for a React single page application.

Simple enough. Next, let’s cover the components of react-router.

BrowserRouter, Route, Switch and Link

The BrowserRouter, Route, Switch and Link are all components of the React-Router. These components are divided into three categories. And must be imported from “react-router-dom”.

import { BrowserRouter as Router, Switch, Route, Link } from "react-router-dom";

The first category is routers, for example <BrowserRouter>. The second category is route matchers, such as <Route> and <Switch> and the last category is navigation, such as <Link>.

Let’s take a look at each of these components individually.

<BrowserRouter>: BrowerRouter is a router implementation that has the ability to incorporate routing in react. It is the parent component that is used to store all other components and it uses regular URL paths.

<Route>: Route is the conditional component that renders a component based on the URL defined or the URL it is pointing to. In other words, it is a component that renders some UI when its path matches the current URL.

<Link>: Link component is used to create links to different routes and implements navigation around the application. Links accepts the to prop, which signifies where we want the link to navigate our user to.

<Switch>: The switch component is used to render only the first route that matches the location rather than rendering all matching routes.

<Router>
<Navbar />
<Switch>
<Route exact path="/">
<Home />
</Route>
<Route exact path="/vessles/addvessle">
<AddVesslePage addVessle={handleAddVessle} />
</Route>
<Route exact path="/vessles/:id" >
<VessleShow vessles={vessles} deleteVessle={handleDeleteVessle} />
</Route>
<Route exact path="/vessles">
<ViewVessles vessles={vessles} />
</Route>
</Switch>
</Router >