I'm really excited to share some advanced with you today. React Router is an amazing tool that enables us to create dynamic and smooth navigation in our applications. React Router techniques React While it is commonly used for basic routing needs, there are some lesser-known techniques that can elevate your routing abilities to a whole new level. Today, I'll be sharing a few of my favourites that I've discovered over time. We'll cover: Handling the notorious 404 page. Creating an active page indicator to highlight the current route. Utilizing and hooks. useNavigate useLocation By the time you finish reading this article, you'll have a strong grasp of these advanced React Router techniques and feel confident applying them in your own projects. So, let's dive right in and enhance our routing skills together! Are you ready? Let's get started! Dealing with a 404 page When working on bigger projects, it's essential to take care of routes that can't be found. We often refer to these routes as because they return the 404 when a document is not found on the server. 404 routes HTTP status code By the way, if you're a cat lover, you might enjoy checking out . http.cat Now, let's dive into creating a special Route that will be triggered whenever none of the other routes match the current URL in the browser. import {BrowserRouter, Routes, Route} from "react-router-dom";

function App() {
    return <BrowserRouter>
        <Routes>
            <Route path="/" element={<p>Landing page</p>}></Route>
            <Route path="/products" element={<p>Products page</p>}></Route>
            <Route path="*" element={<p>404 page</p>}></Route>
        </Routes>
    </BrowserRouter>
} When accessing the primary page , users will be directed to the Landing page. Navigating to the page will lead them to the Products page. However, if any other links are accessed that do not correspond to a specific route, the 404 page will be displayed. / /products The reason behind this behavior is the implementation of a specialized for the 404 page, where the path property is set to . This configuration ensures that React Router will exclusively utilize this route when no other routes can be matched.  The specific placement of the 404 Route is inconsequential and can be positioned anywhere within the section, as an integral component of it. <Route> * <Routes>...</Routes> Active page Another way apps can make use of routes in a practical manner is by highlighting the currently active page in the menu. Let's imagine you have a navigation menu with two links: Home - This link takes the user to the main page . / About - This link takes the user to the about page . /about With React Router, it becomes possible to automatically highlight the link when the user is on the route. Similarly, you can highlight the Home link when the user is on the route. The best part is, you can achieve this without the need for complex conditionals. About /about / Here's a simple way to make it work: import {NavLink} from "react-router-dom";

function getClassName({isActive}) {
    if (isActive) {
        return "active"; // CSS class
    }
}

function App() {
    return <ul>
        <li>
            <NavLink to="/" className={getClassName}>Home</NavLink>
        </li>
        <li>
            <NavLink to="/about" className={getClassName}>About</NavLink>
        </li>
    </ul>
} The code you see above needs some CSS to make the class work. So, we can enhance it by making the menu link of the currently active page appear bold and stand out. active .active {
    font-weight: bold;
} The attribute of the element has the flexibility to accept a function instead of just a string. When you decide to use a function, it will be given an object as a parameter, and this object will have the property already set on it. To easily access this property within the function, we use destructuring by including in the parameter. className NavLink isActive {isActive} Next, we proceed to verify if holds a truthy value. If that's the case, we will return the class name . isActive CSS active When the current path in React Router matches the attribute of the component, the function will evaluate to a boolean value. to NavLink isActive As a result, React Router will seamlessly include the class in the corresponding element, indicating it as the currently active route. active <NavLink /> Shorter version If you prefer a shorter approach, you can use the ternary operator to refactor the code mentioned above. This operator provides a way to replace an if/else statement by using the format: . condition ? truthy expression : falsy expression I don't really use the ternary operator much because it can often make the code less readable. However, it’s acceptable to use in this case. Consider the following as an example: function getClassName({isActive}) {
    if (isActive) {
        return "active";
    } else {
        return "";
    }
} You can substitute the above code with the following approach: function getClassName({isActive}) {
    return isActive ? "active" : "";
} You simply need to ensure that the return statement is placed outside of the ternary operator. When the condition is true, the expression after will be executed . Otherwise, the expression after will be executed . isActive ? "active" : "" Now, we can eliminate the need for a separate function definition called . Instead, we can use an arrow function like this: . getClassName ({isActive}) => isActive ? "active" : "" If you find this change too difficult to read, you can continue using a separate function as before. The final code would look like this: import {NavLink} from "react-router-dom";

function App() {
    return <ul>
        <li>
            <NavLink to="/" className={({isActive}) => isActive ? "active" : ""}>Home</NavLink>
        </li>
        <li>
            <NavLink to="/about" className={({isActive}) => isActive ? "active" : ""}>About</NavLink>
        </li>
    </ul>
} Oh boy, I can practically hear your thoughts! Sojin, you've gone and broken the DRY principle, haven't you? This is just an example. No need to get all worked up 😀 Choosing Between Link and NavLink: What Sets Them Apart? You might have already noticed that I'm using instead of our usual friend, . But don't worry, let me explain why. You see, the component doesn't allow you to use a function definition for the prop. Yeah, it might be surprising, but that's just how it is when you're working with . NavLink Link <Link /> className <Link /> One common mistake I've seen is junior React developers trying to use function definitions in the prop of a component, which simply doesn't work. className <Link /> If you're interested, I can write an article about this topic. Just let me know in the comments! useNavigate In certain circumstances, you might need to programmatically relocate pages within your React application. For example, to redirect the visitor to a specific page, you can submit a request and wait for the response. Here are a few examples: If the user isn't signed in, send them to the login page. After the getLogin request has successfully completed, redirect the user to the . /dashboard This requires using the hook, which returns a function that you can use to programmatically redirect the user to a new route. useNavigate() Take a look: import React, {useEffect} from "react";
import {useNavigate} from "react-router-dom";

function HelpPage() {
    const navigate = useNavigate();

    useEffect(() => {
        const isLoggedIn = window.localStorage.getItem("isLoggedIn");
        if (!isLoggedIn) {
            navigate("/login");
        }
    }, []);

    return <h2>Help page</h2>;
} Using BrowserRouter is Essential! In this example, we're checking if the localStorage has a value assigned to the key . If it doesn't, we'll redirect the user to the page using the function. isLoggedIn /login navigate("/login") To make it work, just remember to use the hook within a component that's nested inside the component. Otherwise, it won't function properly. useNavigate() <BrowserRouter /> For instance, the following example won't work: import React from "react";
import {BrowserRouter, useNavigate} from "react-router-dom";

function App() {
    // ❌ This breaks because the component was not wrapped by BrowserRouter, but its children are.
    const history = useNavigate();

    return <BrowserRouter>
        {/* ... */}
    </BrowserRouter>;
} If you're trying to use the hook inside the component, you might run into a little hiccup. That's because it won't work unless you wrap the component with . useNavigate() App() App() <BrowserRouter /> But don't worry! The good news is that all the child components inside App will automatically be wrapped by , so you can happily use in those child components without any issues. <BrowserRouter /> useNavigate() However, if you really need to use in the component itself, there's a simple solution. You just need to create a parent component that wraps and make sure to move the inside that parent component. Once you do that, you'll be good to go and can use in the component to your heart's content 💗 useNavigate() <App /> <App /> <BrowserRouter /> useNavigate() <App /> Ensuring Accessibility and Proper Link Usage When it comes to making your website accessible, it's important to pay attention to how your links are structured. To ensure that, it's recommended to use elements instead of other methods. <Link /> Why? Well, these elements will automatically render as tags, which are known for their . <a> accessibility features Now, here's a friendly tip: avoid replacing your normal elements with the method provided by . This method should only be utilized in cases where using a element isn't possible. <Link /> .push() useNavigate() <Link /> When does that happen? Typically, it's when you need to redirect users programmatically based on certain logic, like the result of a operation. fetch() useLocation What if you want to execute a piece of code every time React Router takes you to a new address? You can accomplish that easily with the help of the hook. But before we dive into the details, let's explore some scenarios where this can come in handy. One of the most common use cases is sending a event to your analytics service, like Google Analytics. useLocation pageview However, it's worth mentioning that Google Analytics 4 now takes care of this automatically, so you don't necessarily have to implement it yourself. Nevertheless, learning about the hook is still valuable, as you might find other purposes for it. For instance, you can use it to integrate with other libraries and analytics services, or to execute specific actions based on the visited routes. useLocation The possibilities are endless! useLocation hook The hook is super handy because it gives you information about the route that's currently being used. useLocation Here's a friendly guide on how to use the useLocation hook: import {BrowserRouter, Routes, Route, useLocation} from "react-router-dom";
import {createRoot} from "react-dom/client";

function App() {
    const location = useLocation();
    console.log(location.pathname);

    return <Routes>
        {/* routes here... */}
    </Routes>
}

createRoot(document.querySelector("#react-root")).render(<BrowserRouter><App /></BrowserRouter>); Now, you can access the route information through the location variable. It's an object that contains the current . pathname To find out which route the user is currently browsing, simply use . It will give you something like , , or any other route you've set up. location.pathname / /about Remember, just like with the hook, it's important to have your code running inside a component that's wrapped by . Otherwise, the hook won't do its magic. useNavigate <BrowserRouter /> useLocation Responding to Location Changes When the location changes, you can make use of the hook to access the current URL path in React Router. By wrapping your code with a hook and setting the dependency to , you can run a specific piece of code whenever there is a navigation to a new URL. useLocation useEffect location Here's an example of how to do it: import React, {useEffect} from "react";
import {BrowserRouter, Routes, Route, useLocation} from "react-router-dom";
import {createRoot} from "react-dom/client";

function App() {
    const location = useLocation();

    // run a piece of code on location change
    useEffect(() => {
        console.log(location.pathname);
        // send it to analytic, or do some conditional logic here
    }, [location]);

    return <Routes>
        {/* routes here... */}
    </Routes>
}

createRoot(document.querySelector("#react-root")).render(<BrowserRouter><App /></BrowserRouter>); Whenever the user moves to a new route during navigation, the code inside the hook will run and do its thing. It's basically a way to make sure that specific code gets executed whenever there's a change in the location object. useEffect Nice Job, Now your a React Router Expert 🥳 To wrap it up, this article has given you a deeper understanding of React Router. While you might not use all of the features discussed here. Still it's fantastic that you’re aware of them. If you ever find yourself needing to incorporate similar functionality in the future, you know exactly where to look. So, be sure to save or bookmark this post for easy reference. And remember, if you have any questions or need further assistance, feel free to reach out to me on Twitter. I'm here to help!

The code in this story is for educational purposes. The readers are solely responsible for whatever they build with it.

Walkthroughs, tutorials, guides, and tips. This story will teach you how to do something new or how to do something better.

Advanced React Router V6 Techniques: Going Beyond the Basics

About Author

Comments

TOPICS

THIS ARTICLE WAS FEATURED IN

Related Stories

Untitled Story

Defining Javascript Variables: Why You Should Ditch Var for Let and Const

$PEPE, a Purple Lamborghini, and More: The Story Continues

102 Most Important Webism Quotes by Unknown Authors

100 Days of AI Day 3: Leveraging AI for Prompt Engineering and Inference

100 Days of AI, Day 8: Experimenting With Microsoft's Semantic Kernel Using GPT-4

Defining Javascript Variables: Why You Should Ditch Var for Let and Const

$PEPE, a Purple Lamborghini, and More: The Story Continues

102 Most Important Webism Quotes by Unknown Authors

100 Days of AI Day 3: Leveraging AI for Prompt Engineering and Inference

100 Days of AI, Day 8: Experimenting With Microsoft's Semantic Kernel Using GPT-4

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps