Client Side Routing — React
New innovations in tech have increased dramatically in the last decade. This made accessing information and entertainment over the internet easier. Existing in internet has become almost necessary for companies and most of us as individuals. All of these brought single page application popularity where it is today. Therefore, this article will be about something very common in single page applications, changing URL path, but specifically for apps built with React.
Even when we interact with a single page web app, we still see our URL path changing. Besides this reassures user about our app is responding, it also helps backend developing when current URL path need to be used. Since we establish the importance of it, let’s talk about how we achieve client side routing.
react-router-dom
This node package provides 4 commonly used components which are BrowserRouter, Link, Route and Switch.
import { BrowserRouter as Router } from "react-router-dom"
Router help us to keep user interface in sync with the URL. In React, we wrap our App component with Router, so we can use other common components throughout the app.
import { Link } from "react-router-dom"
Link component writes <a href= ...>Example</a> HTML for us. Eventually when its child component or element is clicked it updates client URL to desired path. To specify this path, we pass props named `to` and its value would be the path we want to route to.
import { Route, Switch } from "react-router-dom"
Route component is used to select the components we want our app to render. It usually takes props named path and this props would have a string value of a URL path. Than it uses path-to-regexp to check if the current browser URL matches this path props URL. If they match, it renders the components it wrapped around.
Note: Since regex is used, sometimes Routes path props can still match and you end up rendering a component you didn’t want to render. In order to avoid that, you can use exact path instead of path . For example: one of your components Route path is “/” and another one is “/trips”. First path still matches with second path so first component will be rendered as well when client path is “/trips”. Using <Route exact path="/" >...</Route> will solve your problem.
Switch component should be used, if we have multiple sibling components with different URL paths. That means, if we rendering or returning multiple <Route /> components, we should wrap these with <Switch> ... </Switch> , so we can “switch” between them.
react-router and useHistory()
Sometimes we want client side routing to be triggered by submitting forms, clicking custom buttons, after session storage expirations or after any event that our app logic requires. These are different than clicking on <a href=.. > tags.
import { withRouter } from "react-router"
withRouter() function takes a component as an argument and passes router props from parent component. History is one of them. and with history we can route client URL.
Note: withRouter does not subscribe to location changes like React Redux’s connect does for state changes. Instead, re-renders after location changes propagate out from the <Router> component. This means that withRouter does not re-render on route transitions unless its parent component re-renders.
Trips component obtains history object properties as props. In line 9, we are accessing history objects’ push() method from props passed via withRouter() in line 16 and this will route client to the passed argument path which in this example “/previous-trips”.
useHistory()
This hook gives us access to history object properties and we can achieve same tasks above with it in functional components.
