React Router DOM study note

Client side routing is a type of routing where as the user navigates around the application or website no full page reloads take place, even when the page’s URL changes.

Single Page Application is a very common way of programming websites these days. The idea is that the website loads all the HTML/JS the first time you visit. When you then navigate, the browser will only rerender the content without refreshing the website.

Get Eddie Na’s stories in your inbox

Join Medium for free to get updates from this writer.

Remember me for faster sign in

Limits of client side routing :

• initial GET request can take a while for a huge application.
• Analytic tools normally track page views, but an SPA doesn’t have pages in the traditional sense, so this makes it harder for Analytical tools to track page views
• harder to design

How to use

• install react-router-dom

npm install react-router-dom;

• import functions

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

• Router(BrowserRouter) : base for app’s routing — cover everything

<BrowserRouter><App /></BrowserRouter>

• Route : for each component to have path

— exact path : only gets called for exact path name

• Switch : acts like switch-case from js

<Switch>
<Route exact path="/"><Home></Home></Route>                
<Route path="/topics"><Topics></Topics></Route>                
<Route path="/contact"><Contact></Contact></Route>                
<Route path="/">Not found</Route>
</Switch>

• NavLink : same as <a></a> + can give path using to/ exact to — reloads only the component you want, without whole page refresh
• Link and NavLink looks same but NaveLink gives the component a class of “active” while it’s clicked and active => easier to give css with : .active{}

<li><NavLink exact to="/">Home</NavLink></li>                
<li><NavLink to="/topics">Topics</NavLink></li>                
<li><NavLink to="/contact">Contact</NavLink></li>