Let’s face it. With SPAs, the future is . here Building an SPA is super cool, and super exciting. Why is it so exciting? I guess it’s that intense feeling of accomplishment when you change the page accessing a new web page. It gives us a haughty air of superiority over the web of the 90s — “We have conquered you, feeble one.” Or maybe it’s the fluidity. The sense of power and authority in knowing that users’ eyes will be impenetrably glued to their screens, devoid of the quick coffee-sip or knee-drum routine which hath populated the protocol pauses of the past. “You are mine forever”, sayeth the screen to the beholder. without So, in that spirit, here are the basics of Router. React For NPM, inside your React project, install . react-router-dom You’ll want to import the component from the package. BrowserRouter The is our wrapper. This will wrap all the routes to let React know that this is a router. Here’s an example: BrowserRouter import { BrowserRouter as Router } from "react-router-dom" const App = () => {return (<Router><div>...routes</div></Router>)} The next thing we’ll need is the component (also from ). Route react-router-dom The component is what we use each time we define a route. It will contain a as well as a to render whenever the url path is matched. Example: Route path component import { BrowserRouter as Router, Route } from "react-router-dom"import { nav } from "/components/nav"import { homepage } from "/components/homepage" const App = () => {return (<Router><div><Route path="/" component={nav}><Route path="/home" component={homepage}></div></Router>)} In this example, we will render the component on route and we will match the component on route . nav "/" homepage "/home” However, there’s a catch! Just like in a regular Node/Express app, the route will also match all other routes! So our nav component will be rendered on both the route and the route. "/" "/" "/home" Of course, in large applications, you’ll need a way to fix this. There are two ways… The first option is to use the keyword. Then the component will only be rendered on an exact match of the url path. Example: exact import { BrowserRouter as Router, Route } from "react-router-dom"import { welcome } from "/components/welcome"import { homepage } from "/components/homepage" const App = () => {return (<Router><div><Route exact path="/welcome/home" component={homepage}><Route exact path="/welcome" component={welcome}></div></Router>)} The second option is to use another component from the library called . Just like a plain switch case, this will only match one route (whichever one matches first). Example: Switch JavaScript import {BrowserRouter as Router,Route,Switch } from "react-router-dom"import { welcome } from "/components/welcome"import { homepage } from "/components/homepage" const App = () => {return (<Router><Switch><Route path="/welcome/home" component={homepage}><Route path="/welcome" component={welcome}></Switch></Router>)} Notice that even though the url path should match both routes, we will only render the first matched route, thereby rendering the homepage component. Pretty cool, huh! welcome/home That is the basic setup and use of the router; however, there is much more to explore with this library, so check out the documentation for all the goodies! If you’re just getting started with SPAs, then I hope this was helpful and best of luck on your adventures!
