ConclusionĪt this point, we have seen how to install, set up and use the basic features of React Router to navigate to different pages in your app. Recall that we created the pathnames listed in the App component so when you click on the link, it will look through your routes and render the component with the corresponding pathname.Īlways remember to import Link from react-router-dom before using it. Its to attribute specifies which path the link takes you to. The Link component is similar to the anchor element () in HTML. This is what the index.js looked like initially: import React from 'react' Īfter making changes with React Router, this is what you should have: import React from 'react' To do this, open the index.js file in the src folder and import BrowserRouter from react-router-dom and then wrap the root component (the App component) in it. The first thing to do after installation is complete is to make React Router available anywhere in your app. If you are using yarn then use this command: yarn add How to Set Up React Router To install React Router, all you have to do is run npm install in your project terminal and then wait for the installation to complete. So as a single page application, when you navigate to a new component using React Router, the index.html will be rewritten with the component's logic. React Router – like the name implies – helps you route to/navigate to and render your new component in the index.html file.
What happens when you have a different component you would prefer to render as a different page? Do you create a new HTML file? The answer is no. This means that there is only one HTML file where your code will be rendered to. All the code you write in your App component which acts as the root component gets rendered to this HTML file. When you create a new project, you'll always see an index.html file in the public folder. This is the general idea behind SPAs which allows content to be rendered faster without the page being refreshed.
So what React Router does is intercept the request being sent to the server and then injects the contents dynamically from the components we have created. In React, the page contents are created from our components. In non-single page applications, when you click on a link in the browser, a request is sent to the server before the HTML page gets rendered. This section is aimed at beginners – you can to skip it if you already understand what a SPA is and how it relates to React. You need to understand how pages are rendered in a React app before diving into routing.
0 kommentar(er)
