Developers Guide to React Routers
React Router is a library for rendering multiple components at once. React router and express router are two completely different libraries that are not to be confused with. When working with a library you’ll need to install new packages just like installing the React npm package. Another nice thing about the React router is that it focuses on fetching one particular component while the React with no libraries fetched all of them, even the unnecessary components. There are 4 main ideas that we need to cover which are (Route, Link, Navlink, Redirect, and Prompt)
Router
Traditionally our code in React would look like this.
Its a simple return statement with no wrapper. Doing something like in the image below would allow you to use the Router component of React.
We will need to import the Router to allow us to use the React Tag. Inside these Router Tags, we will need to return a route path that can contain a simple h1 tag. Something like this image represents the concept.
What this is doing that’s different from putting all the components in the same file with no wrappers is that if we were to use a nav bar and click on an element, only that element would be fetched. This allows React to have a speedier response to display and render what we need. So what React router really does is keep the URL in sink with the url we are clicking on. To break down the above code. The route needs a path, the path being the url part of our example. When we type in the url with the slash at the end, it’ll take us to the Welcome Home page. If anything else is typed, this page will not render. This example will still take us to the home page even if the path does not match the url because it is missing an exact property. Something like this would be needed.
We can see that we still have a casual div tag, wrapping the entire contents. What’s different is that we are using the Route Component we imported to specify an exact path for the Component LandingPage which is made in another file. A great example of this is the below code.
There are two router components being used with different paths. If the user were to type in a URL with only the additional “/” at the end, the Route would take the user to the LandingPage. Same for the app path. Typing in “/app” would take the user to the AppLayout page of the website. Another important add-on for the exact path to work in our navbar setup is to use Links.
Links
Links would go inside the nav tags and are very simple. It would look something like the below image.
The quotes are what would be used to have the desired path the user would want to go to. The link is still a component imported from React and it is used for refreshing the page. The Route component we used is what’s rendering the actual page. The last key component in a react-router is a switch.
Switch
A switch would look through all of its children which are the routes and find a URL that matches the path. A switch would look like this.
This brings us into the next topic which is Nesting Routes. Nesting Routes happens in the switch component but it renders or loads the entered URL that’s equal to its path. So if we input “/about”. The switch component would render the About component. Every React App will require a router component. Another rule for using react routers it that declaring the router must happen at the parent of all other components.
Summary
The switch and Route component have a specified name which is Route Matchers. The Switch Component searches for URLs that match its own path. The search happens in the Route component which is a child of Switch. When one URL is found that is matched to its, it only renders that component and does not render all of the other components. This saves time and memory. Heres an example of the Route component being a child of the Switch.
In the above code, we can see that if the Route path = “/about”, then the About component is rendered. We can think of the Switch component like a switch statement in Javascript. Lastly, we got to cover the Nav component or Router Changers. The Link component is part of the Router changes and this is what creates the entire link.
