React: A Route is only ever to be used as the child of a Routes element

by

The React error “Uncaught Error: A <Route> is only ever to be used as the child of <Routes> element, never rendered directly. Please wrap your in a <Routes>.” happens when you forget your <Routes> tags around your <Route> components. Fix it by adding the <Routes> context around the <Route> components.

This error was discovered when I was working on the React routing guide. If you aren’t familiar with react-router-dom and want to learn about it, check out that article first.

The react-router-dom package is very picky about where you place its components, and for good reason. A lot of them depend on the context in which they find themselves, since the data they need can only be accessed there.

<Route> components are no exception. Not only do they need to be inside a <[Hash|Browser]Router> component, they also need to be inside a <Routes> component as well.

Let’s take a closer look.

Problem: your <Route> components aren’t inside a <Router>

Here’s our App.js top-level component where we define our router behavior:

import { Provider } from "urql";
import { urqlClient } from "./utils";
import { HashRouter, Route, Link } from "react-router-dom";

import MessagesPage from "./MessagesPage";
import UsersPage from "./UsersPage";

function App() {
    return (
        <Provider value={urqlClient}>
            <HashRouter>
                <div id="menu">
                    Menu: 
                    <Link to="/">Home</Link> 
                    <Link to="/users">Users</Link>
                </div>
                <Route path="/" element={<MessagesPage />} />
                <Route path="/users" element={<UsersPage />} />
            </HashRouter>
        </Provider>
    );
}

export default App;
JavaScript

Everything looks good, except for these two lines below:

                </div>
                <Route path="/" element={<MessagesPage />} />
                <Route path="/users" element={<UsersPage />} />
            </HashRouter>
JavaScript

These <Route> tags are outside a <Routes> component, which means you’ll get the following error if you try to run this app:

Solution: import Routes and wrap your <Route> components in it

The way to fix this is very simple. Just import Routes from react-router-dom and wrap your <Route> tags in it:

import { Provider } from "urql";
import { urqlClient } from "./utils";
import { HashRouter, Route, Routes, Link } from "react-router-dom";

import MessagesPage from "./MessagesPage";
import UsersPage from "./UsersPage";

function App() {
    return (
        <Provider value={urqlClient}>
            <HashRouter>
                <div id="menu">
                    Menu: 
                    <Link to="/">Home</Link> 
                    <Link to="/users">Users</Link>
                </div>
                <Routes>
                    <Route path="/" element={<MessagesPage />} />
                    <Route path="/users" element={<UsersPage />} />
                </Routes>
            </HashRouter>
        </Provider>
    );
}

export default App;
JavaScript

And now your routes should display with no issues.

Conclusion

When using the react-router-dom package, it’s important to make sure your components are where they expect to find themselves. A lot of data is shared between them, and that can only happen when they’re in the same context. <Route> tags need to be in a <Routes> component (and nothing else) otherwise you’ll get an error.