In this tutorial, you are going to learn how to use React Router 4 through practical examples. Routing is of uttermost importance in almost every application's architecture. The larger your app becomes, the more your routing functionality becomes complex, from simple to deeply nested routing scenarios. Before now, previous versions of React Router involved declaring your app's routes upfront, declaring all the routes in a file as part of your app's initialization before rendering occurs. With React Router 4, you get to route declaratively. React Router is composed of these link react router dom react-router, link react router dom, and react-router-native. Note: If you are building a web application that supports legacy browsers, it's recommended that you use the HashRouter. And I wrapped the component with Router which is the alias of BrowserRouter. The Router component is the first step to routing successfully. It serves as the container for every other route component. Furthermore, the Router component can only have one child element or component. Now, how do we define our routes. Here, we will define our routes. Each of these links has a component that should be rendered once the current location matches the route's path. However, something is off here. However, it is rendered on all the routes. What if you just want to render a small function instead of a whole component. You can use the render prop as shown in the code below. How would you accomplish this. As a developer, I'm sure you are already looking at this approach with a set of refactoring eyes. In the code sample above, there's a lot of repetition and hardcoding. The more the lines of code, the harder it becomes to change a route. Let's refactor step by step. Now do the same for the routes but with match. We can actually replace those three lines of code with just one line. Route Protection and Authentication When developing web applications, there are scenarios where certain routes have to be protected from access. Most times, these routes can only be accessed by authorized users. In previous versions of React Router such as v3, route protection code looks like this: index. Now, it's different for React Router 4. Let's build out three components, Public, Private, and Login. React Router 4 uses a declarative approach, so it's convenient that we have a component such as that we can use. However, the react router 4 library doesn't provide it. But let's come up with an Auth Service. Let's take it a step further by trying to actually log in and log out. Modify the login component like so: App. This should be typical behavior of your routing system else users will always be redirected to a particular page rather than where they came from. Now, we'll have to modify the props of the component in. However, wouldn't it be nice if we can provide a logout button for the user after successful authentication. Now, go ahead and render the component. You should be able to log in and log out successfully. Link Component Customization Link Component Customization. You'll learn how to customize your links to have a distinctive look when a particular link is active. React Router 4 has an easy way of accomplishing this task. Have the code below in your App. Component render return Home Contact export default App; The is in charge of making the active link distinct. Now, what makes up the component. The harnessed the power of. There are 3 ways to render something with a ;, and. The code above used the children prop. And that's all we need to create a custom Link. Handling Non-existent Routes As a developer, you need to handle scenarios where certain routes don't exist. Do you just allow your site to break. This is how to handle this scenario. Add code to your App. And we wrapped our routes inside the component. Try it out in your browser. Your app will display a Sorry, this page does not exist message. SideBar Rendering Sidebars in apps have been in existence for a very long time. Let's learn how to make a sidebar using React Router 4. Component render return Home About Contact export default App In the code above, we have a leftbar and a main key. They'll come in handy soon and make our work super easy. Now, all we need to do is map over the routes array as shown in the code below: App. Try it out in your browser and see your left sidebar in action. Alongside with the classicAuth0 allows you to add features likelink react router dom,and with just a few clicks. To follow along the instruction describe here, you will need an Auth0 account. If you don't have one yet, now is a good time to. Also, if you want to follow this section in a clean environment, you can easily create a new React application with just one command: npx create-react-app react-auth0 Then, you can move into your new React app which was created inside a new directory called react-auth0 by the create-react-app tooland start working as explained in the following subsections. Setting Up an Auth0 Application To represent your React application in your Auth0 account, you will need to create an. After creating your application, Auth0 will redirect you to its Quick Start tab. This is a security measure implemented by Auth0 to avoid the leaking of sensitive data like. From the Auth0 perspective, you are good to go and can start securing your Link react router dom application. To install these dependencies, move into your project root and issue the following command: npm install --save auth0-js react-router react-router-dom Note: As you want the best security available, you are going to rely on the. This method consists of redirecting users to a login page hosted by Auth0 that is easily customizable right from. If you want to learn why this is the best approach, check. After installing all three libraries, you can create a service to handle the authentication process. Note: For the placeholders, you will have to replace them with something similar to your-subdomain. Since you are using the Auth0 login page, your users are taken away from the application. This means that you need to create a component responsible for this route. So, create a new file called Callback. While this component processes the authentication result, it simply shows a message saying that it is loading the user profile. Glad to see you back, name. Log out ; return I don't know you. You are defining a HomePage component that shows a message with the name of the logged-in user that is, when the user is logged in, of courseand a message telling unauthenticated users to log in. Also, this file is making the App component responsible for deciding what component it must render. If the user is requesting the home page i. If the user is requesting the callback page i. Note that you are using the Auth service in all your components App, HomePage, and Callback and also inside the Auth service. As such, you need to have a global instance for this service, and you have to include it in your App component. So, to create this global Auth instance and to wrap things up, you will need to update your index. You just finished securing your React application with Auth0. If you take your app for a spin now npm startyou will be able to authenticate yourself with the help of Auth0, and you will be able to see your React app show your name that is, if your identity provider does provide a name. If you are interested in learning more, please, refer to to see, step by step, how to properly secure a React application. Conclusion Understanding React Router 4 requires a shift in your mental model of routing. However, you can always consult the for more information.
