React Routing
While learning React, I found I had a lot of questions about React Router. One thing I’ve learned throughout my coding journey is that when a concept leaves you with unanswered questions, it’s good practice to lean into the questions and get some answers.
I recently created a React App implementing React Router, but I didn’t quite understand how best to use it. I had questions about when to create a route and why I needed it. And then I encountered <Switch> in my React reading, and I learned that “it renders a route exclusively.”
Ok, I thought, so what does that mean exactly? Can’t I just render a route exclusively without <Switch>? These are just some of the questions I had, so it seemed like a good opportunity to write a blog post to answer these questions for myself and anyone else perplexed by React Router.
First, I’ll explain what React Router is and what purpose it serves. As for installing it, that seemed pretty straightforward so I’ll leave install instructions to the official documentation on installation instructions
React Router is a third-party library that syncs the browser URL to the UI. It is meant to go hand-in-hand with React and can be implemented wherever React can. The essence of React Router, as I understand it, is that it allows for web page navigation in a single-page app without having to refresh the page over and over again for anything big or small rendered on the page.
Instead, React Router uses the component structure of React to render components conditionally. Once I finally understood this conditional rendering of components along with making a full page refresh unnecessary, React Router started to make sense.
The benefits of this conditional rendering of components are numerous. React Router can provide a more seamless experience for the user without, for example, blank pages between renderings. Given that just a component will be rendered on an already established page, we won’t be as prone to timing out or taking time to slowly load, etc.
React Router also provides the benefit of RESTful routing so the user’s browser can reflect the content of the rendering that is happening on the single app page.
As for <Switch>, it renders a route exclusively. This is different functionally from using <Route> without <Switch>. Every <Route> that matches the location will render inclusively. For example,
When a route has children, it will nest the UI components for shared layout when the child route matches.
Take this example from the React Router official documentation:
In the above example, if the URL is /about, then <About>, <User>, and <NoMatch> will all render because they all match the path. When we only want to pick one <Route> to render, we can do it with <Switch> (again, this is the example from the official documentation):
Well, this little dive into React Router certainly cleared up a couple of things for me. I hope you found it helpful too.
