React Router's useRoutes hook

Linda Okorie — Thu, 13 Jan 2022 16:23:11 +0000

When creating multi-paged apps with React or any other library/framework, a package to handle routing is always used. Whether it is Vue Router for Vue apps, React Router for React apps, etc. Today I'm going to emphasize implementing routes in React using React Router's useRoutes hook.

Prerequisites

Although I will try my best to make this easy enough for a beginner to understand, I advise that before going further you at least have basic knowledge of React and have at least seen React Router used in an application. If you have no experience with React Router, you could look at the documentation first. They give really clear examples that will get you up to speed in no time.

Approach 1: Using the `<Routes>` and `<Route>` JSX components

This is the primary way of rendering something using React Router and the approach that would be seen used in many places. Hence, I won't dwell much on the syntax of this but drop the example which will be used in the rest of this article.

`MainLayout.js`

This is a layout component for any page that is not an authentication page.



import { Link, Outlet } from "react-router-dom";
export default function MainLayout() {
    return (
        <>
            <nav className="nav-bar">
                 <ul>
                     <li>
                         <Link to="home"> Home</Link>
                     </li>
                     <li>
                         <Link to="about"> About</Link>
                     </li>
                     <li>
                         <Link to="/"> Log In</Link>
                     </li>
                     <li>
                         <Link to="signup"> Sign Up</Link>
                     </li>
                 </ul>
            </nav>
            <Outlet />
        </>
    );
}

`Home.js`



export default function Home() {
    return (
        <div className="App">
            <h1>Home Page</h1>
        </div>
    );
}

The other pages used in this example were defined in a similar way as Home.js. You can look at the sandbox to see them for clarity. These however form the main elements of the example.

`App.js`



import "./styles.css";
import { BrowserRouter, Routes, Route } from "react-router-dom";
import Home from './pages/Home'
import About from './pages/About'
import Login from './pages/Login'
import SignUp from './pages/Signup'
import AuthLayout from './layouts/AuthLayout'
import MainLayout from './layouts/MainLayout'

export default function App() {
    return (
        <BrowserRouter>
            <div className="App">
                <h1>React Router Example</h1>
                <Routes>
                    <Route element={<AuthLayout/>}>
                        <Route path="/" element={<Login/>}/>
                        <Route path="signup" element={<SignUp />}/>
                    </Route>
                    <Route element={<MainLayout/>}>
                        <Route path="home" element={<Home/>}/>
                        <Route path="about" element={<About />}/
                    </Route>
                </Routes>
             </div>
        </BrowserRouter>
     );
}

You can read more about this in React Router documentation here. The <Routes> component acts as a wrapper for all possible routes that can be matched. The <Route> carries an element in its element attribute. If the content of its path attribute matches the current URL, it renders the content of the element attribute. As location changes a user navigates the app, the corresponding elements are rendered.
To make this example as comprehensive as possible, I took the routing from a side project I am working on and it has one kind of route which won't be in a basic example of routes - Layout Routes. A layout route is a parent route without a path attribute used to group child routes under a specific layout. For more on this and other major concepts of React Router have a look at this part of the documentation. It's a bit lengthy but it will get you up-to-speed with the lingo quickly.

Approach 2: Using the useRoutes hook

`routes.js`



import { useRoutes } from "react-router-dom";
import Home from './pages/Home'
import About from './pages/About'
import Login from './pages/Login'
import SignUp from './pages/Signup'
import AuthLayout from './layouts/AuthLayout'
import MainLayout from './layouts/MainLayout'

export default function Router() {
let element = useRoutes([
    {
        element: <AuthLayout />,
        children: [
           { path: "/", element: <Login /> },
           { path: "signup", element: <SignUp /> },
        ],
    },
    {
        element: <MainLayout />,
        children: [
            { path: "home", element: <Home /> },
            { path: "about", element: <About /> },
        ],
    },
]);
return element;
}

`App.js`



import "./styles.css";
import { BrowserRouter } from "react-router-dom";
import Router from './routes'

export default function App() {
return (
    <BrowserRouter>
        <div className="App">
            <h1>useRoutes Example</h1>
            <Router/>
        </div>
    </BrowserRouter>
);
}

The other components are defined the same way as in the previous approach. You can look at the sandbox below to see it all in one cohesive example.

Note that for clarity and separation of concerns in writing code, I do not declare the object-based config in the same file as to where I want to use the routes. In my project, I created a folder called routes and a file called index.js to hold the routes. Another common convention I have seen devs do is to create a file in the src folder called routes.js and put it all there.

So let's look closer at what is happening in the **routes** file. The routes are inserted as objects in an array, with each object representing one route. The object has keys and values similar to the attributes and values of the <Route> component. To account for nested routes, the object has an optional third key known as children that allows you to list all child routes of a specific route. The nesting can go as deep as your application requires it to be.

The return value of the **useRoutes** hook is either a valid React element or **null** if nothing matched. Once you are done creating the routes, you then add them to your app in the same place you would have added the **<Routes>** and **<Route>** components which for me is my **App.js** file:

The routes.js file is imported in App.js and added just as you would any other component. It was created in a functional component, after all. Remember that hooks can't be used outside of functions and that is why it was declared inside of one. If I intended to use it in App.js, I would've declared it inside the function as well.

There aren't any clear benefits of using one approach of routing over another, it all depends on the preference of the developer or team and the use case. For me, abstracting the route config using the hook made it easier for me to understand and anyone visiting my project.

Resources

For a closer look at the code used in this article, you can visit these two sandboxes;

useRoutes Example

Routes JSX Example

What Data Structures and Algorithms should mean to you

Linda Okorie — Sat, 04 Apr 2020 23:55:51 +0000

Cover Photo by Tim Gouw on Unsplash

Pursuing a career in Software Engineering is a lot of work. I get a lot of advice from different angles that it seems quite overwhelming. At different points part of the advice included studying Data Structures and Algorithms. One problem I had though was that I was never satisfied with the reasons I was given to study it (maybe that was why I was always scared of it).As a self taught developer who reads materials as it comes my way and relies on answers from Stack Overflow a lot, the only reason I could conjure up for studying DS & A (Data Structures and Algorithms) was I needed to know them in order to answer questions during interviews. It wasn't till I started reading that I understood how wrong I was.

Learning Data Structures and Algorithms isn't just about the interview – it goes beyond that. Have you ever wondered WHY companies want you to know these things? Its all about implementation! Data Structures were created to improve the time and space complexity. Algorithms are the steps taken to perform a given task. Now naturally, lesser steps would translate to smaller time. This is important to companies because time spent and space consumed translates to money – money for production, money for maintenance. If the software took too much time for work, it wouldn't be of much use to anyone. If it crashed as result, that would mean bringing more people in to fix it.

When we solve problems as newbies, we just hack till we find solutions. After doing this for a while, patterns begin to emerge. Now instead of going through the same painful process each time you need to solve a problem, DS & A helps us shorten the time it takes to craft a solution. Imagine immediately searching for a number in an array, I know immediately a binary search would be the fastest way to do it! It also optimizes operations for better efficiency – they take lesser time or lesser space (there are trade offs, through). A solution hacked together might work, but the difference in efficiency when compared to a solution carefully crafted using Data Structures is clear.

Bottom line, having knowledge of Data Structures and Algorithms is like a superpower. Its like the ultimate fashion trend that never goes out of style. You'll be able to implement it no matter the time or the language. Most books on the topic write solutions in pseudo code making it easier to understand despite your background. It also makes you see problems differently. Solving problems won't be about hacking things together anymore. There's a mathematical side to it all (the side that leaves me bewildered the most) but I suggest just trying to understand the basics first and ease into it slowly.

I'm still studying but would love learn more things that can be gotten out of DS & A.👋

DEV Community: Linda Okorie

React Router's useRoutes hook

Prerequisites

Approach 1: Using the <Routes> and <Route> JSX components

MainLayout.js

Home.js

App.js

Approach 2: Using the useRoutes hook

routes.js

App.js

Resources

What Data Structures and Algorithms should mean to you

Approach 1: Using the `<Routes>` and `<Route>` JSX components

`MainLayout.js`

`Home.js`

`App.js`

`routes.js`

`App.js`