Implementing Links
Explore how to implement navigation in React applications using React Router. Learn to use the Link component for declarative client-side navigation and the useNavigate hook for programmatic routing. This lesson helps you improve app performance by avoiding full page reloads while enabling seamless multi-page navigation within a single-page app.
We'll cover the following...
In this section, we are going to use the Link component from React Router to declaratively perform navigation when clicking the app name in the app header. Then, we’ll move on to programmatically performing navigation when clicking the “Ask a question” button to go to the ask page.
Using the Link component
At the moment, when we click on “Q and A” in the top-left corner of the app, it is doing an HTTP request that returns the whole React app, which, in turn, renders the home page. We are going to change this by making use of React Router’s Link component so that navigation happens in the browser without an HTTP request. We ...