React: [div] is not a component

by

This react-router-dom error occurs when you put a <div> tag inside the <Routes> component tags. Fix this by making sure only <Route> components are found inside the <Routes> component tags.

This error was discovered while working on a guide to add routes to your React app with react-router-dom. If you want more info on implementing routes in React you should check it out.

Let’s look at the situation that caused this error.

Problem: You put a div element within the <Routes> tags

Let’s say you have the following <App> component as the top level of your app:

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>
                <Routes>
                    <div id="menu">
                        Menu: 
                        <Link to="/">Home</Link> 
                        <Link to="/users">Users</Link>
                    </div>
                    <Route path="/" element={<MessagesPage />} />
                    <Route path="/users" element={<UsersPage />} />
                </Routes>
            </HashRouter>
        </Provider>
    );
}

export default App;
JavaScript

At a glance, this looks like it should work. However, if you run it, you’ll get the following error:

As you can see, we can only have one or more routes as children to the <Routes> component. That means no <div>s, <span>s, or other components in there, our menu included.

Here’s where the problem is:

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>
                <Routes>
                    <div id="menu">
                        Menu: 
                        <Link to="/">Home</Link> 
                        <Link to="/users">Users</Link>
                    </div>
                    <Route path="/" element={<MessagesPage />} />
                    <Route path="/users" element={<UsersPage />} />
                </Routes>
            </HashRouter>
        </Provider>
    );
}

export default App;
JavaScript

Solution: Only put <Route> components within the <Routes> tags

The solution was pretty simple, we just moved our “menu” like this, outside the <Routes> tags:

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

Conclusion

When working with react-router-dom, it’s important to make sure your components are in the correct location. When you’re defining your routes, make sure that nothing else is in the <Routes> besides <Route>s.