React: No routes matched location

by

The react-router-dom error “No routes matched location” happens when you have a <Link> element that points to a path that isn’t defined in a <Route>. To fix this, make sure all of your <Link>s point to valid <Route>s.

This error was discovered when working on our routing tutorial for React. If you’re new to using react-router-dom, it’s worth a read.

Just like regular <a> tags, your links have to point to something. The <Link> element in React functions in much the same way. Instead of getting a 404 error, however, you’ll end up with a blank spot where your route was supposed to render. If you open up your developer console, you’ll see the error there.

Let’s look at an example.

Problem: your <Link> points to the wrong path

Below is our top level App.js component from our routing tutorial:

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-page">Users</Link>
                </div>
                <Routes>
                    <Route path="/" element={<MessagesPage />} />
                    <Route path="/users" element={<UsersPage />} />
                </Routes>
            </HashRouter>
        </Provider>
    );
}

export default App;
JavaScript

Everything looks fine at a glance, but if you look closely, you’ll see one of the `<Link>` components in the menu points to a route we don’t have defined:

                <div id="menu">
                    Menu: 
                    <Link to="/">Home</Link> 
                    <Link to="/users-page">Users</Link>
                </div>
                <Routes>
                    <Route path="/" element={<MessagesPage />} />
                    <Route path="/users" element={<UsersPage />} />
                </Routes>
JavaScript

Unlike a regular <a> element, you’re not going to get a 404 error in the browser. Instead, you’ll get an empty space where the component should render and an error in the console:

Solution: ensure your <Link> elements point to valid <Route>s

To fix this is pretty simple, just make sure your <Link>s match your <Route>s:

                <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>
JavaScript

And that’s all there is to it.

Conclusion

Just like with regular anchor tags, you have to make sure your Link elements in react-router-dom match valid routes. If they don’t, you won’t get an obvious error message displayed to you. Instead, you’ll have to open up your console window (good practice to keep it open when developing anyway) in order to see what the issue is.