Client Side Routing with React Router
Client Side Code is responsible for Client Side Routing by fetching and displaying data in the browser. Instead of having to request separate pages as you would if you were using a server you can just call to the Client Side Routing to load a specific component in exchange for the component thats already loaded on the page. This makes for an increase in page load speed which is great news for our visitors because no one likes to wait in todays day and age.
Where this new found speed come from huh?! Well with Client Side Routing you can just make an initial request for the data that you would need from your backend and store it in your applications state. Then call on that information whenever needed as oppose to making server call every time you load a page. Lessening server calls mean faster load times so there you go.
So how would one go about setting this up. Well for starters you would need to setup your components. Even though we don’t have to load any additional pages because we will more than likely be making SPA(Single Page Applications) with React we still want to create the experience for the user as if we were. Next you will want to install react router dom using this command in the terminal of your project ‘npm install react-router-dom’. This command installs the package so that we are able to get the methods we need that were built in with this library. We then will want to import the BrowserRouter as a Router and place it on our home page component which for most is the index.js file.
Next we will want to wrap an opening and closing Router component around the App component in the index.js file. This is a crucial step because if you miss this step your application will not work and keep sending you errors.
Finally you can go into your App.js file and setup your routes there. First we will import Route and Switch from react-router-dom, then we will place and open and close tag for the Switch component and then you can make route tags for ever route you will need to define. Hope this blog was helpful for you and heres some use examples below.
