A n00b Approach to React Router
I’m in my second to last week of Flatiron School’s Software Engineering bootcamp. To say I am burned out from the “firehose of information” from the past 12+ weeks is an understatement. To wrap up the bootcamp, we have 3 weeks to fully dedicate to a final project that showcases the skills we’ve learned so far. I decided to make a React App (as it was the last topic we covered in class and still “fresh” in my head) with a Rails backend API (…well, this is a requirement I’ll get to soon. I’m currently working off a db.json file until I get to that stage of my project). This is my first solo project and let’s just say my talents and abilities are better utilized when pair programming and/or working in teams.
One of the biggest lessons I’ve learned so far in this process is to not get overwhelmed by the numerous things that must be done in order to have your vision for your app come to fruition. Sometimes your idea may be too ambitious given your skillset (especially someone like me who didn’t even know how to use a command line terminal, let alone develop a functioning website). I honestly felt extremely scatterbrained in the beginning of this project. When feeling overwhelmed, it’s best to take a step back, break up goals into small achievable tasks, and work on one task at a time. A fantastic colleague shared this with me about a month ago and it works every time — I highly recommend this approach!
Once I got myself in order, I got the skeletons of my components to render. From here, it was time to make my app feel more like a webpage that most people are used to — with different URLs, buttons re-routing you to different pages, etc. A React app is typically a single-page applications (SPA), meaning all the functionalities we’d like our app to accomplish can be done with one page. The main benefit of this is speed — a lot less load time as the user interacts with the website. However, as I said earlier, most users are used to having the URL change based on their actions on the webpage. It also helps to share specific parts of your website with unique URL’s and eventually gain more exposure. The solution to this is React Router.
Setting up React Router was a lot easier than anticipated. However, the actual implementation of what I was ultimately trying to accomplish took longer than expected to figure out. Taking a step back, I realized the main issue was how I structured my components. I set up each component as it’s own website, with different layouts and features. Looking back at it, maybe this was not the most efficient/best way to set up my website. Luckily, there is also room for improvement and refactoring, which I plan to do in the next few days.
My original component hierarchy started off something like this:
The “Nomz App” would be the landing page where someone signs in or signs up (saving authentication for a later time), the “Main Container” would be the home page once someone signs in, and based on buttons clicked in the home page, they will be redirected to their “Kitchen”, “Grocery List”, or “Recipe” pages. Again, each of these have their unique layout and look.
After some trial and error, I noticed the webpage wouldn’t redirect to the component as a whole, instead, the component that was clicked would simply render right underneath — a visual and functional nightmare. After hours of googling a solution to this with no success, I stepped back to articulate what was happening with the code. Going line by line, I realized the <Switch> and <Route> components of React Router were under the render() return() section of my App class component. Above the <Switch> and <Route> components, I had JSX which React is rendering. That led me to the idea of having a completely blank page so each component can fully render how I currently have it set up.
To get to that blank page, I essentially created a new component for the Landing Page, transferred the JSX in App.js to this new component, and essentially made the App.js have no JSX to render and establish React Router only. My new Component Hierarchy now looks something like this (for now — there is a high likelihood it will change again as I continue building this app):
After installing react-router-dom, I wrapped the “BrowserRouter” (I made it into an alias of “Router” — see line 3) around my App component in the index.js file:
Here is what the App.js currently looks like:
And from there, each unique URL is rendering the full page as currently intended:
Conclusion — if you set up your components with the intention to render something completely different than the other components, the work around for now is to make the App.js file blank (meaning it is not rendering JSX) and set your Routes and paths there. That may mean creating an additional component for a landing page or any other pages to accomplish each unique URL to render their unique pages.
As always, I am very much open to any other feedback or suggestions to improve this approach and execution of code. I hope some may find this helpful in their journey of completing a React app with React Router. Cheers!
