React - Route Render Component

Posted by Paloma Mendez on March 8, 2021

React is a framweork that lets you create interactive UI’s. You can choose to configure routes if you would prefer not to create a single page application. If you want to go deeper, you are able to consider whether to unmount and mount a new component or simply update a component. While these two lifecycle methods may seem to have an inconsequential influence over how a page is routed to, it has a major effect on your app’s performance. Routing is the ability to move between different parts of the application when a user interacts with a page via button, link, image, etc.. Most choose to demonstrate their routes with page tabs or by displaying a menu in which users can decide where to navigate.
A blog post by Edmondo Atto describes the browser router as the following :

The BrowserRouter used for applications which have a dynamic server that knows how to handle any type of URL whereas the HashRouter is used for static websites with a server that only responds to requests for files that it knows about.


Without diving too deep, a way to implement a browser router and ensure that all of your pages are able to be rendered, follow the steps below =>

  1. After having initialized your app and created basic components as pages, run the following code to get started with your router congifuration. npm install react-router-dom
  2. Import { BrowserRouter as Router, Route } from "react-router-dom"; and any components you wish to use as pages as well.
  3. A React component to render only when the location matches. It will be rendered with route props. it will look like this:
    ``` ReactDOM.render(
<Route path="/user" component={User} />

); ```

  1. The final route render component will look like so:

```import React from “react”; import ReactDOM from “react-dom”; import { BrowserRouter as Router, Route } from “react-router-dom”; import User from “./User.js” ReactDOM.render(

); ```
And there you have your component based react router, you can add as many routes and components in tandem as you would like, but it is not recommended to have more than necessary as React is based of the principle of reusable components.