Today I will be addressing and taking an in-depth look into both the problems with multi-routed react apps and the most viable solution: React Router. Let’s get started.
Addressing the issue:
When building a full-stack application using react, there may be a point in time when a developer will be given a task that requires utilizing react’s JSX files under multiple routes. In this case, a developer would immediately run into a serious issue.
Normally when dealing with react in full-stack apps, there would need to be a web-pack client installed as a dependency, and utilizing the bundle.js as a means to encode the react code into a readable ES5 format.
Normally, this is how JSX files are computed into working data — read off of the assigned index.html file. However if we were to try and say for instance.. assign different react components for different routes on the website, then that’s a different story entirely. For someone who may not know about react-router, the first conclusion one would make is to try and use express, since express uses a use method and static method to generate html files onto a webpage under a specific route.
This logic could work, if it were just a plain html file without react. Since we are using react components that are being accessible to the bundle using an index.html, this approach would not work.
Now another conclusion that one would also make is to add multiple html files to pass in specific components and using their own respective bundles. In this sense, utilizing the use and static methods from express could work, but creating every individual html file and processing individual bundles could be taxing to not only the application itself but to the developer.
Looking at this visual above could give a developer anxiety because of the clutter. Luckily, there is a solution to all of this mess and the solution is very simple. One could issue npm install react-router to add as a dependency, and import the package into a react JSX file and use the router tag to set router conditionals in the html itself.
Let’s dissect what is happening above:
Router: a tag used to set React-Router methods.
Switch: a tag that allows for multiple set router paths.
Route path: a tag used to create a router.
Route exact path: a tag used to create an exact router path.
The Pros of React-Router
- It’s dynamic: React-Router allows the developer to fire different components depending on different routes.
- Can use javascript to manipulate route behavior: In addition, React-Router allows for javascript code to manipulate the behavior of routes, letting the developer use conditionals, iteration, recursion, or data transfer to manipulate routes.
- Can bring server-side routes to the client-side : React-Router allows for routes to be controlled under the client-side now rather than just being manipulated in the server-side.
And That’s It!
In conclusion, it would help tremendously to use React-Router to handle multi-routed react applications.
