Looking to learn more about hookrouter and how it works? Follow along with this tutorial to learn more.
Introduction -- 00:00
Project creation with create-react-app -- 02:02
Critical step to remove React.StrictMode (otherwise hookrouter does not work) -- 04:10
Install hookrouter dependency -- 04:30
Creating our helper components and Navbar -- 06:32
Rending routes with the useRoutes hook -- 12:54
Create the Home, About, Contact, Not Found pages -- 15:21
Basic demo of the routes working -- 17:39
Setting up advanced routing of child routes on About page -- 18:05
Creating components for child routes -- 19:10
Finalize advanced routing of child routes -- 21:39
Creating links for use with route params -- 23:27
Utilize route params on the contact page to conditionally render content -- 26:58
Demo of the final product -- 28:24
Try LogRocket for free: logrocket.com/?yt46
LogRocket is a frontend application monitoring solution that lets you replay problems as if they happened in your own browser. Instead of guessing why errors happen, or asking users for screenshots and log dumps, LogRocket lets you replay the session to quickly understand what went wrong. It works perfectly with any app, regardless of framework, and has plugins to log additional context from Redux, Vuex, and @ngrx/store.
In addition to logging Redux actions and state, LogRocket records console logs, JavaScript errors, stacktraces, network requests/responses with headers + bodies, browser metadata, and custom logs. It also instruments the DOM to record the HTML and CSS on the page, recreating pixel-perfect videos of even the most complex single-page apps.
Try it for free: logrocket.com/signup/
31 июл 2024
