- [Instructor] So what is routing? To better grasp the fundamental concepts behind routing, let's first talk about single-page applications, or SPAs. A single-page application, as its name implies, is a single webpage that runs in the browser and looks and functions like a multipage application. It's built using various views that render like separate pages, but all interactions occur on one page. When users navigate the application, the browser renders content for each specific view based on the URL without loading an entire new page from the server. Think of popular web apps like Twitter, Airbnb, and Netflix. These are all single-page applications that dynamically rewrite certain sections of the page and load new content as users interact with them without having to make an entirely new request to the server. One of the most common and performant ways of building websites and applications as single-page apps is with React. Most React applications need navigation to transition from one view to another. So because of that, one of the fundamental parts of single-page apps React developers need to manage is routing. So routing is the process of moving or navigating users between different parts of the application when they visit a specific URL. In React, you navigate through a single-page app by swapping out the components displayed on screen as the URL changes. For example, a user on a recipe search app clicks a dessert recipes link in the navigation menu to navigate from the homepage to a page displaying dessert recipes. In this case, a home component might get replaced by a categories component that displays all the dessert recipe details. An efficient routing solution should also keep track of browser history so users can navigate the app using the browser's back and forward buttons and even refresh the app while keeping the UI in sync with the URL. And routing should link users to specific sections of an app. For example, if a user bookmarks or shares a URL in your app, the URL should always direct the user to the correct location. Similarly, the router should handle redirecting appropriately when performing other actions within the app, like submitting a form or common user events involving creating, updating and deleting content. Now React does not come with a built-in routing system or any features for routing specifically. React focuses only on building user interfaces and state management. So React applications usually require a routing library and React Router is the standard routing library for React. It provides a component-based approach to routing with a collection of navigational components. All right, so you've learned some of the ways routing works in single-page apps and how React developers implement a tool like React Router to manage the switching of the view or what gets shown on screen when the URL changes. So from here, you can learn how to use React Router in your React apps to navigate between different components or views, change the browser URL, modify browser history and keep your UI in sync with those changes.
- [Instructor] So what is routing? To better grasp the fundamental concepts behind routing, let's first talk about single-page applications, or SPAs. A single-page application, as its name implies, is a single webpage that runs in the browser and looks and functions like a multipage application. It's built using various views that render like separate pages, but all interactions occur on one page. When users navigate the application, the browser renders content for each specific view based on the URL without loading an entire new page from the server. Think of popular web apps like Twitter, Airbnb, and Netflix. These are all single-page applications that dynamically rewrite certain sections of the page and load new content as users interact with them without having to make an entirely new request to the server. One of the most common and performant ways of building websites and applications as single-page apps is with React. Most React applications need navigation to transition from one view to another. So because of that, one of the fundamental parts of single-page apps React developers need to manage is routing. So routing is the process of moving or navigating users between different parts of the application when they visit a specific URL. In React, you navigate through a single-page app by swapping out the components displayed on screen as the URL changes. For example, a user on a recipe search app clicks a dessert recipes link in the navigation menu to navigate from the homepage to a page displaying dessert recipes. In this case, a home component might get replaced by a categories component that displays all the dessert recipe details. An efficient routing solution should also keep track of browser history so users can navigate the app using the browser's back and forward buttons and even refresh the app while keeping the UI in sync with the URL. And routing should link users to specific sections of an app. For example, if a user bookmarks or shares a URL in your app, the URL should always direct the user to the correct location. Similarly, the router should handle redirecting appropriately when performing other actions within the app, like submitting a form or common user events involving creating, updating and deleting content. Now React does not come with a built-in routing system or any features for routing specifically. React focuses only on building user interfaces and state management. So React applications usually require a routing library and React Router is the standard routing library for React. It provides a component-based approach to routing with a collection of navigational components. All right, so you've learned some of the ways routing works in single-page apps and how React developers implement a tool like React Router to manage the switching of the view or what gets shown on screen when the URL changes. So from here, you can learn how to use React Router in your React apps to navigate between different components or views, change the browser URL, modify browser history and keep your UI in sync with those changes.
- [Instructor] Two of React Router's core components for rendering content are routes and route. The route component is what tells React Router to create a new route. Its jobs is to render specific elements, like a component, to the page whenever the current URL matches a given path. And the routes component manages all of the routes declared in the app. In our project, app is the top-level component, and where we will declare and manage all routes. So at the top of App.js, I'll first import the Routes and Route components from react-router-dom. The app component is also going to return our main route configuration. So within the app function's return statement, I'll set that up just below the header element with the Routes component. And within these Routes tags, let's declare the app's first route with the Route component. The Route component is key in that it maps the app's URL or current location to the different React components you've set up via two props: path and element. The path prop indicates the URL to match and the element prop specifies what to render when path matches the URL. So for example, to render some content at the route path or when the app loads, set the path prop to a forward slash. Then as the value for element, pass an h1 with the text Hello, from my router! I'll give that a save and over in the browser, notice that our headline immediately renders to the page. And now let's, for example, set the path prop to something like Hello and now nothing renders at the root path because no route matches this location. However, changing the URL to /hello displays the headline. So now let's instruct React Router to render the home page or home component set up here in the components folder at the root path. So back in the route component, I'll set path back to a forward slash. Then pass the element prop, the Home tag. Now, since we're referencing the Home component, here in App.js, we'll need to import it at the top of the file with import Home from ./Home. And now the app renders the home component and all of its contents to the page by default. Good. You're also able to pass props down to components rendered by a route, like you would with any React component. So for example, I'll give Home a title prop and pass it the string Welcome to Red30 Tech. And over in the Home component, I'll first destructure the title prop here in the function definition. Then replace the h1's text with the title variable within curly braces. And now over in the page, good, there's the new heading text being set with props. All right, next, I'll declare another route to render the site's category's view. So within my routes tags, I'll add a new route component where I'll set the path prop to the string categories and the element prop to the categories component in the components directory. Again, we'll need to import this categories component at the top with import Categories from ./Categories. So now over in the browser, I'll test my changes by changing the URL to /categories. And it works as expected. The page displays the session categories heading. This view needs to display all session categories from the data in api.js. So I'll open the file Categories.js and the first thing I'll do is import the getCategories function from the API file with import getCategories from ../api. Then inside the function, I'll assign the return value of getCategories to the constant categories. And the value will be an array holding each category object with information we can use like a category name and ID, which you can view here in the api.js file. So let's display the categories in an unordered list just below the heading and to apply styles from the CSS, I'll give the ul, the className categories. And then we can iterate over the categories using the map method with categories.map. So for every category object, let's render a list item displaying the category name, which we can access with cat.name. And let's not forget to add a key prop to the li so that we don't get that unique key prop warning from React, and as a value, I'll pass it the category ID. That's also in the data with cat.id. And now on the categories page, we see all of the conference categories listed below the headline all neatly laid out with CSS. Great, and notice that React Router renders the home and categories components exactly where we're declaring the routes in the app component. So if we, for example, move the routes declaration above the header, that's where the components will be rendered. Now, we don't want that, so let's move it back below the header. And remember, you can have as many routes as you'd like in your web app but they all need to be nested inside a routes component. The routes component is quite savvy in that it pays close attention to all of its child route components, and selects the proper route to render based on the URL. Once you've set up routing in your app, you're ready to work with other components that let you manipulate the URL and navigate or link between pages.
- [Instructor] No single page app is complete without links to navigate users between pages or views. So what might be the best approach for adding links to move around our React application? Many websites and web apps use anchor elements to navigate between pages. Although, you're technically able to use anchor elements to link to other pages with React, this approach causes a full page refresh. Clicking on a link to visit another page sends a new request to the server, then the browser reloads and redirects the current page to the new page. React Router is all about client side routing for web apps. So it provides a special link component to change the URL and navigate to another view when users click on it without reloading the page. We'll use the link component in App.js by first importing link from react-router-dom. And let's have the app component return a nav element inside the header just below the image. And this nav is going to contain the navigation for the site. Within the nav tags, I'll add a link to the Categories route with the Link component, like so. The Link component accepts a prop named to, which specifies the path to navigate the user to when clicked. In this case, it's /categories to match the path we've specified for this route. Over in the browser, you should see a new Categories link at the top of the page, and clicking on it renders the Categories component or view. And as you would expect on any website or app, clicking the browser's back button takes you back to the previous page. And if you inspect the link using a tool like Chrome DevTools, notice that what link renders is a fully accessible anchor element with an href attribute pointing to a URL path. So it looks and works just how you would expect a regular link to work on a webpage. So in a nutshell, when a user clicks on a link, React Router performs some clever checks under the hood to find the matching route and load the requested component, all without reloading the entire page in the browser. And there are other ways to declare and display link components, that, for example, apply unique styling for selected or active links, which you'll learn about the more you explore and work with React Router.