Instruction: Explain the role of React Router in a React application and illustrate how to set up basic routing.
Context: This question evaluates the candidate's experience with client-side routing in React applications using React Router.
Official answer available
Preview the opening of the answer, then unlock the full walkthrough.
First, we need to ensure React Router is installed in our project. Assuming we're working with a React application created via Create React App, we can add React Router by running npm install react-router-dom. This command installs the package that contains the DOM bindings for React Router, which is essential for web applications.
Once installed, we can start setting up our routes. The core component at the heart of React Router is <BrowserRouter>, which uses the HTML5 history API to keep the UI in sync with the URL. We usually wrap our application's root component with <BrowserRouter> in the index.js file. This looks something like: ``` import { BrowserRouter } from 'react-router-dom';...