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
- Import statement and Babel
- should I choose reactjs+f7 or f7+vue.js?
- Uncaught TypeError: Cannot read property '__SECRET_DOM_DO_NOT_USE_OR_YOU_WILL_BE_FIRED' of undefined
- .tsx webpack compile fails: Unexpected token <
- React-router: Passing props to children
- ListView.DataSource looping data for React Native
- React Native with visual studio 2015 IDE