React Router DOM v6 — Part — I

React enables us to develop single-page applications i.e single HTML pages. Essentially we render different components in a single HTML file. This is done by connecting different .js file(React component) to a particular <div> file in HTML file.

Why React Router?

How do we implement different components based on URL?

abc.com/login and abc.com/home shouldn’t be giving the same component, right?. Login requires a login page and hence the home page.

So the solution here would be component rendering based on URL, i.e.,/login gives login component and /home gives home component.

How come it is still Single Page Application when the URL is changed?

The main difference to notice between Single page and Multi-page is page reloading. When you move to a different URL in multi-page, the page reloads. For the case of a single page, it won’t reload. This is because the same HTML file is used for rendering different components. React Js enable this.

So,

Single Page to different components → React Js

Single Page + Different URL to different components → React Js + React Router

The process that dynamically fetches components based on URL is called Routing.

This is in the context of React and React Router.

Note: We implement Dynamic routing in React Router.

In a nutshell,

Static routing → routing takes place before rendering

Dynamic routing → routing takes place during rendering → Essentially a react component

React Router DOM = React Router + API’s like <BrowserRouter> component

You can read more about static and dynamic routing on the net. Just remember almost everything in React router is a component because it is a dynamic routing(during render).

How to connect React Router to React app?

This means connecting the browser URL to your app. Therefore it must be at the top component of your app <App />. But wait, how to connect? Just wrap <App />.And what to wrap? <BrowserRouter> from ‘react-router-dom’.

<BrowserRouter> 
<App /> 
</BrowserRouter>

I am skipping the whole code like import statements here to understand the concepts better.

Say we have three components App, Users, and Products, and we need to have ‘/app,’’/users’, and ‘/products’ URLs correspondingly.

App — /app

Users — /users

Product — /products

<BrowserRouter> 
<Routes>  
<Route path='/app' element = {<App />} />  
<Route path='/users' element = {<Users />} />  
<Route path='/products' element = {<Products />} /> 
</Routes> 
</BrowserRouter>

If we give URL ‘/users’ → it will render Users component and for ‘/products’ renders Product component and so for ‘/’.

What if we want to nest routes?

Like ‘/app/users’ or ‘/app/products’. This can be done by parent — child relationship of <Route> component.

<BrowserRouter> 
<Routes>  
<Route path='/app' element = {<App />}>    
  <Route path='users' element = {<Users />} /> --> only renders Users    
  <Route path='products' element = {<Products />} /> --> only renders Products  
</Route> 
</Routes> 
</BrowserRouter>

Note: I removed ‘/’ before users and products because react-router identifies it as the child of /app

Here we add an integrated /app with users and products in the URL only.

/app/users = ‘/app’ + ‘users’

/app/products = ‘/app’ + ‘products’ .

This will render whatever component we give as an element prop in <Route>.

What if we want to inherit the <App> component itself?

This is the best use case of Layout consistency. Say <App> component contains headers and navbar consistent across all nested routes like products and users.

The above code won’t inherit the <App> component’s header and navbar. It renders only what it is given in element prop in <Route>

We need to use the <Outlet />(some weird name ‘outlet’ I couldn’t explain) component from react-router-dom for the shared layout.

Where to connect the <Outlet />?

Obviously, in the app component <App> because that is the layout, we want to get shared across nested routes.

export const function App() => { 
return ( 
<> 
{whatever code ...} 
<Outlet /> 
</> 
) 
}

Now if we if we type — /app/users or /app/products → it will render app component’s header and navbar along with element prop component in <Route>