Learning locations in React-Router

I’ve recently began the simplification my capstone project, Dexter’s Challenge. It’s a hard long look some sloppiness and shaking my head, mainly due to over complication my number of components.

While I’m not done yet with the new files on the left, originally, I used an additional set of components because Dee Dee’s quizzes. The less options and nature of true or false questions, compared that of a multiple choice made this rash decision possible. Also, I had considerable confidence in my artistry with the rails api to serve my json data as needed to help me avoid any breakage during the demo by letting the coding logic primarily live in my api.

Since then I’ve been doing working a good chunk in react, therefore, a good chance to not only refactor and but flex those new react muscles. This project could have better bones, and I can do that. Some ned goals in this build is relying on logic front end and build it using an object with all the information for my current quizzes.

One React practice I wanted to implement was to make my components as reusable and simple as possible. With this being a simple demo, I’ll also be using React Context for global state management, which is built in, so I wont need to install Redux.

However, to make this more dynamic I needed to also account for letting my components know what information they needed to pull without relying on the component doing a fetch to an exact point in my backend. I wanted to tell pull based on a key of either mandark or dee for the categories page. Then, I remembered a simple code fetch I used to pull the correct quiz in my original code.

Not the most elegant code, I know, I should also destructive this in my reboot =) Back to the story, so since I’m importing React Router, I have access to my params. So console logging params.match, I get to see what I’m working with

Sadly, in this general case, my params are a bit more empty than I would like. Tried a few combinations and was still not getting a quick string that I wanted such as having http://localhost:3000/mandark return “mandark”. This is where I decided to look at documentation and I found a curious hook that React Router has built in. After some testing, I decided to implement useLocation, which i need to import from react-router-dom.

The useLocation hook returns an object that represents the current URL, like a useState that returns a new location whenever the URL changes. Once pulled in and then assigned to a variable, I’ll console log it and see what it has for me.

This is actually, what I was looking for need that name for categories and tests. However, that “/” might be problematic. So I will just have it cut off from my returned variable . and Voila!

I will have to continue to find more ways, to do this in this specific component. However, I think it’s important to mention the importance of looking over previous code and packages and seeing what they have to offer. Some solutions are sitting there, and documentation once navigated consistently can be so clutch.

Well, I’ve got some more work to do, so until next time.