Hey! I'm on a mission to make 100 React.js projects ending May 31st. Please follow my dev.to profile or my twitter for updates and feel free to reach out if you have questions. Thanks for your support!
Link to today's deployed app: Link
Link to the repo: github
Yesterday I created a decent sized project using React Router so this is part 2 in a series on it. This project had a lot more functionality, unique pages, and explored the React Router imports much more deeply.
Unlike yesterday, this project used a massive list of the React Router functionality including:
- Components - BrowserRouter, Link, Switch, Route, Redirect
- Nested Routes - Nested sub-components, Nested app-level components (pages)
- React Router pre-built Hooks - useParams variables, useRouteMatch path, useHistory methods like push, go
Also unlike yesterday, this project took an unexpectedly long time to put together, so for detail I'm just going to refer you to my github for code samples.
The new stuff for me was that I had to use inside of a . Didn't know that.
Also, I didn't know about pulling the first path segment out of useRouteMatch, and I also didn't know about history.go() and that you can use any negative or positive number to navigate forward or backward through page history as shared by the hook with your present component.
Lastly, I didn't know you could place a with components inside any component, but you can. The switch will match the URL and so long as it doesn't interfere with a higher-level switch, it will render different components inside your present component's JSX. That is pretty neat, and handy. My food page was made this way, displaying listings if there was no slug, and an individual listing component if there was a slug. Pretty neat.
If you like projects like this and want to stay up to date with more, check out my Twitter @jwhubert91, I follow back! See you tomorrow for another project.
Top comments (0)