Forem

Cover image for What is react router?
Duomly
Duomly

Posted on • Originally published at blog.duomly.com

24 5

What is react router?

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>
Enter fullscreen mode Exit fullscreen mode

Duomly - Programming Online Courses

Thank you for reading,
Radek from Duomly

Image of Timescale

🚀 pgai Vectorizer: SQLAlchemy and LiteLLM Make Vector Search Simple

We built pgai Vectorizer to simplify embedding management for AI applications—without needing a separate database or complex infrastructure. Since launch, developers have created over 3,000 vectorizers on Timescale Cloud, with many more self-hosted.

Read more →

Top comments (2)

Collapse
 
viniciusrio profile image
Vinicius Rio

Simple and very useful! Thanks, man!

Collapse
 
hemant profile image
Hemant Joshi

Is there something like Multiple Page website in react just like Spa?

AWS Security LIVE!

Tune in for AWS Security LIVE!

Join AWS Security LIVE! for expert insights and actionable tips to protect your organization and keep security teams prepared.

Learn More

👋 Kindness is contagious

Engage with a sea of insights in this enlightening article, highly esteemed within the encouraging DEV Community. Programmers of every skill level are invited to participate and enrich our shared knowledge.

A simple "thank you" can uplift someone's spirits. Express your appreciation in the comments section!

On DEV, sharing knowledge smooths our journey and strengthens our community bonds. Found this useful? A brief thank you to the author can mean a lot.

Okay