No Routes Matched Location "/" solution (react_devtools_backend. ‎4026)

No Routes Matched Location is causes, as in recent React routes they have change flow little bit and it amy cause this issue. (react_devtools_backend. ‎4026)

Code block which has error:

import React from "react";
import { Route, BrowserRouter as Router, Routes } from "react-router-dom";

// pages
import HomePage from "./pages/home-page";
import ContactPage from "./pages/contact-page";
import NotFoundPage from "./pages/not-found-page";

function App() {
  return (
    <Router>
      <Routes>
        <Route path="/" element={<HomePage />} />
        <Route path="/contact" element={<ContactPage />} />
        <Route path="*" element={<NotFoundPage />} />
      </Routes>
    </Router>
  );
}

export default App;

In this case may be your will get an error No Routes Matched Location "/"

Its happens in new version of react-route to solve it you can simply need to follow below code snippet.

Code block which has solution to error:

function App() {
  return (
    <Router>
      <Routes>
        <Route index element={<HomePage />} />
        {/* you ^ can add `index` prop to make it default route*/}
        <Route path="/contact" element={<ContactPage />} />
        <Route path="*" element={<NotFoundPage />} />
      </Routes>
    </Router>
  );
}

When you specify any route as index route it make it a default route for root-path / (slash).Now, if you open website without any query string https://website.com it will render that route and you have no issue regarding No Routes Matched Location "/".

This is very commen issue among developer due to version change of react-route. It's easy to solve if you follow this code snippet. please check our other code snippets for react-route for more infomration.

Related Articles

js interview questions