What is react router?

#react #beginners #webdev #codenewbie

This article was originally published at https://www.blog.duomly.com/6-most-popular-front-end-interview-questions-and-answers-for-beginners-part-2/#what-is-react-router

Most of the applications built with React.js are SPA (single page application), but it doesn't mean your app will have only one view.

It means your app doesn't need to reload to another view, but how can we change views and go into the next page?

We can use a react router for that!

React router is the official and standard routing package that we use in React.js to change views, and move between pages.

With the React router, we can specify the whole routing for our modules that will decide what view should be visible when we enter the specified URL but not only.

React router gives us the possibility to create protected views like, for example, the view that we need to be logged in or have any special requirements to visit.

One more useful feature of the React Router is the routing history, that can keep all of the history of our views, and come back to the specified step when needed.

I couldn't forget to tell about handling the URL params like, for example, the id of element, to render the route that can show specified elements, and give you access to that param.

We can use routing navigation in a few ways. The most popular is to type URL, visit URL by a link inside the menu, or add data to the routing history.

On the example below, you can simple routing:

<Switch>
  <Route path="/about">
    <About />
  </Route>
  <Route path="/contact/:id">
    <Contact />
  </Route>
  <Route path="/contact">
    <AllContacts />
  </Route>
  <Route path="/">
    <Home />
  </Route>
</Switch>