I am using React-router-dom v6 and having a problem here. the website is working fine but in the console, it is giving me this error. "No routes matched location "/" " can anyone tell me what is the problem? I just transferred from react-router-dom v5 to v6 this is the code of my APP.jsx
import React, { lazy, Suspense, useEffect } from "react";
import "./App.css";
import Header from "./Screens/Header/Header";
import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
import Loading from "./Screens/Global/Loading";
import { useStateValue } from "../StateProvider";
import Home from "./Screens/Home/Home";
import ScrollToTop from "./Screens/Global/ScrollToTop";
const NotFound = lazy(() => import("./Screens/Global/NotFound"));
const Login = lazy(() => import("./Screens/Auth/Login"));
const AllProductsHeader = lazy(() =>
import("./DevAdmin/Products/AllProductsHeader/AllProductsHeader")
);
const Pay = lazy(() => import("./Screens/Checkout/Pay"));
const RegisteredUsers = lazy(() => import("./DevAdmin/users/RegisteredUsers"));
const Dashboard = lazy(() => import("./DevAdmin/Dashboard/Dashboard"));
const Location = lazy(() => import("./Screens/Location/Location"));
const Order = lazy(() => import("./Screens/Order/Order"));
const Cart = lazy(() => import("./Screens/Cart/Cart"));
const About = lazy(() => import("./Screens/About/About"));
const Orders = lazy(() => import("./Screens/OrderHistory/Orders"));
const Checkout = lazy(() => import("./Screens/Checkout/Checkout"));
const Settings = lazy(() => import("./Screens/Settings/Settings"));
const CreateCategory = lazy(() =>
import("./DevAdmin/Categories/CreateCategory")
);
const MenuScreen = lazy(() => import("./Screens/Menu/MenuScreen"));
const CreateProduct = lazy(() => import("./DevAdmin/Products/CreateProduct"));
const Register = lazy(() => import("./Screens/Auth/Register"));
const AllProducts = lazy(() =>
import("./DevAdmin/Products/Products/AllProducts")
);
const PostalCodes = lazy(() =>
import("./DevAdmin/ManagePostalCodes/PostalCodes")
);
const ManageOrders = lazy(() =>
import("./DevAdmin/Orders/Orders/ManageOrders")
);
const DashboardHome = lazy(() => import("./DevAdmin/Dashboard/Home/Home"));
const Reports = lazy(() => import("./DevAdmin/Reports/Reports"));
function App() {
const { userAPI } = useStateValue();
const [isAdmin] = userAPI.isAdmin;
const { userID } = userAPI;
return (
<Router>
<div className="App">
<Routes>
{isAdmin ? (
<Route
path="/dashboard"
element={
<Suspense fallback={<Loading />}>
<Dashboard />
</Suspense>
}>
<Route
index
element={
<Suspense fallback={<Loading />}>
<DashboardHome />
</Suspense>
}
/>
<Route
path="postalcodes"
element={
<Suspense fallback={<Loading />}>
<PostalCodes />
</Suspense>
}
/>
<Route
path="all_orders"
element={
<Suspense fallback={<Loading />}>
<ManageOrders />
</Suspense>
}
/>
<Route
path="all_users"
element={
<Suspense fallback={<Loading />}>
<RegisteredUsers />
</Suspense>
}
/>
<Route
path="products"
element={
<Suspense fallback={<Loading />}>
<AllProductsHeader />
</Suspense>
}>
<Route
index
element={
<Suspense fallback={<Loading />}>
<AllProducts />
</Suspense>
}
/>
<Route
path="create_product"
element={
<Suspense fallback={<Loading />}>
<CreateProduct />
</Suspense>
}
/>
</Route>
<Route
path="create_category"
element={
<Suspense fallback={<Loading />}>
<CreateCategory />
</Suspense>
}
/>
<Route
path="all_reservoirs"
element={
<Suspense fallback={<Loading />}>
<ManageOrders />
</Suspense>
}
/>
<Route
path="reports"
element={
<Suspense fallback={<Loading />}>
<Reports />
</Suspense>
}
/>
</Route>
) : (
<Route
path="dashboard/*"
element={
<>
<Header />
<Suspense fallback={<Loading />}>
<NotFound />
</Suspense>
</>
}
/>
)}
</Routes>
<Routes>
<Route path="/" element={<Header />}>
<Route
index
element={
<>
<ScrollToTop />
<Home />
</>
}
/>
<Route
path="menu"
element={
<>
<ScrollToTop />
<Suspense fallback={<Loading />}>
<MenuScreen />
</Suspense>
</>
}
/>
<Route
path="order"
element={
<>
<ScrollToTop />
<Suspense fallback={<Loading />}>
<Order />
</Suspense>
</>
}
/>
<Route
path="checkout"
element={
<>
<ScrollToTop />
<Suspense fallback={<Loading />}>
<Checkout />
</Suspense>
</>
}
/>
<Route
path="checkout/paymentOptions"
element={
<>
<ScrollToTop />
<Suspense fallback={<Loading />}>
<Pay />
</Suspense>
</>
}
/>
<Route
path="about"
element={
<>
<ScrollToTop />
<Suspense fallback={<Loading />}>
<About />
</Suspense>
</>
}
/>
<Route
path="find-us"
element={
<>
<ScrollToTop />
<Suspense fallback={<Loading />}>
<Location />
</Suspense>
</>
}
/>
<Route
path="orders"
element={
<>
<ScrollToTop />
<Suspense fallback={<Loading />}>
<Orders />
</Suspense>
</>
}
/>
<Route
path="login"
element={
<>
<ScrollToTop />
<Suspense fallback={<Loading />}>
<Login />
</Suspense>
</>
}
/>
<Route
path="register"
element={
<Suspense fallback={<Loading />}>
<Register />
</Suspense>
}
/>
<Route
path="cart"
element={
<Suspense fallback={<Loading />}>
<Cart />
</Suspense>
}
/>
<Route
path="settings"
element={
<Suspense fallback={<Loading />}>
<Settings />
</Suspense>
}
/>
</Route>
</Routes>
</div>
</Router>
);
}
export default App;I am using React-router-dom v6 and having a problem here. the website is working fine but in the console, it is giving me this error. "No routes matched location "/" " can anyone tell me what is the problem? I just transferred from react-router-dom v5 to v6 this is the code of my APP.jsx
import React, { lazy, Suspense, useEffect } from "react";
import "./App.css";
import Header from "./Screens/Header/Header";
import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
import Loading from "./Screens/Global/Loading";
import { useStateValue } from "../StateProvider";
import Home from "./Screens/Home/Home";
import ScrollToTop from "./Screens/Global/ScrollToTop";
const NotFound = lazy(() => import("./Screens/Global/NotFound"));
const Login = lazy(() => import("./Screens/Auth/Login"));
const AllProductsHeader = lazy(() =>
import("./DevAdmin/Products/AllProductsHeader/AllProductsHeader")
);
const Pay = lazy(() => import("./Screens/Checkout/Pay"));
const RegisteredUsers = lazy(() => import("./DevAdmin/users/RegisteredUsers"));
const Dashboard = lazy(() => import("./DevAdmin/Dashboard/Dashboard"));
const Location = lazy(() => import("./Screens/Location/Location"));
const Order = lazy(() => import("./Screens/Order/Order"));
const Cart = lazy(() => import("./Screens/Cart/Cart"));
const About = lazy(() => import("./Screens/About/About"));
const Orders = lazy(() => import("./Screens/OrderHistory/Orders"));
const Checkout = lazy(() => import("./Screens/Checkout/Checkout"));
const Settings = lazy(() => import("./Screens/Settings/Settings"));
const CreateCategory = lazy(() =>
import("./DevAdmin/Categories/CreateCategory")
);
const MenuScreen = lazy(() => import("./Screens/Menu/MenuScreen"));
const CreateProduct = lazy(() => import("./DevAdmin/Products/CreateProduct"));
const Register = lazy(() => import("./Screens/Auth/Register"));
const AllProducts = lazy(() =>
import("./DevAdmin/Products/Products/AllProducts")
);
const PostalCodes = lazy(() =>
import("./DevAdmin/ManagePostalCodes/PostalCodes")
);
const ManageOrders = lazy(() =>
import("./DevAdmin/Orders/Orders/ManageOrders")
);
const DashboardHome = lazy(() => import("./DevAdmin/Dashboard/Home/Home"));
const Reports = lazy(() => import("./DevAdmin/Reports/Reports"));
function App() {
const { userAPI } = useStateValue();
const [isAdmin] = userAPI.isAdmin;
const { userID } = userAPI;
return (
<Router>
<div className="App">
<Routes>
{isAdmin ? (
<Route
path="/dashboard"
element={
<Suspense fallback={<Loading />}>
<Dashboard />
</Suspense>
}>
<Route
index
element={
<Suspense fallback={<Loading />}>
<DashboardHome />
</Suspense>
}
/>
<Route
path="postalcodes"
element={
<Suspense fallback={<Loading />}>
<PostalCodes />
</Suspense>
}
/>
<Route
path="all_orders"
element={
<Suspense fallback={<Loading />}>
<ManageOrders />
</Suspense>
}
/>
<Route
path="all_users"
element={
<Suspense fallback={<Loading />}>
<RegisteredUsers />
</Suspense>
}
/>
<Route
path="products"
element={
<Suspense fallback={<Loading />}>
<AllProductsHeader />
</Suspense>
}>
<Route
index
element={
<Suspense fallback={<Loading />}>
<AllProducts />
</Suspense>
}
/>
<Route
path="create_product"
element={
<Suspense fallback={<Loading />}>
<CreateProduct />
</Suspense>
}
/>
</Route>
<Route
path="create_category"
element={
<Suspense fallback={<Loading />}>
<CreateCategory />
</Suspense>
}
/>
<Route
path="all_reservoirs"
element={
<Suspense fallback={<Loading />}>
<ManageOrders />
</Suspense>
}
/>
<Route
path="reports"
element={
<Suspense fallback={<Loading />}>
<Reports />
</Suspense>
}
/>
</Route>
) : (
<Route
path="dashboard/*"
element={
<>
<Header />
<Suspense fallback={<Loading />}>
<NotFound />
</Suspense>
</>
}
/>
)}
</Routes>
<Routes>
<Route path="/" element={<Header />}>
<Route
index
element={
<>
<ScrollToTop />
<Home />
</>
}
/>
<Route
path="menu"
element={
<>
<ScrollToTop />
<Suspense fallback={<Loading />}>
<MenuScreen />
</Suspense>
</>
}
/>
<Route
path="order"
element={
<>
<ScrollToTop />
<Suspense fallback={<Loading />}>
<Order />
</Suspense>
</>
}
/>
<Route
path="checkout"
element={
<>
<ScrollToTop />
<Suspense fallback={<Loading />}>
<Checkout />
</Suspense>
</>
}
/>
<Route
path="checkout/paymentOptions"
element={
<>
<ScrollToTop />
<Suspense fallback={<Loading />}>
<Pay />
</Suspense>
</>
}
/>
<Route
path="about"
element={
<>
<ScrollToTop />
<Suspense fallback={<Loading />}>
<About />
</Suspense>
</>
}
/>
<Route
path="find-us"
element={
<>
<ScrollToTop />
<Suspense fallback={<Loading />}>
<Location />
</Suspense>
</>
}
/>
<Route
path="orders"
element={
<>
<ScrollToTop />
<Suspense fallback={<Loading />}>
<Orders />
</Suspense>
</>
}
/>
<Route
path="login"
element={
<>
<ScrollToTop />
<Suspense fallback={<Loading />}>
<Login />
</Suspense>
</>
}
/>
<Route
path="register"
element={
<Suspense fallback={<Loading />}>
<Register />
</Suspense>
}
/>
<Route
path="cart"
element={
<Suspense fallback={<Loading />}>
<Cart />
</Suspense>
}
/>
<Route
path="settings"
element={
<Suspense fallback={<Loading />}>
<Settings />
</Suspense>
}
/>
</Route>
</Routes>
</div>
</Router>
);
}
export default App;Any other improvement will be appreciated
Share Improve this question asked Dec 9, 2021 at 15:44 Sky WalkerSky Walker 681 gold badge1 silver badge5 bronze badges 2-
1
I think you want to wrap all of your
Routes in oneRoutesponent. The firstRouteshas no childRoutethat matches'/'but the second one does. Wrap the whole thing in oneRoutesand the error should go away. Unless you need the functionality of two Routes, you're probably better off acplishing what you are trying to do with oneRoutesand using layoutRoutes. reactrouter./docs/en/v6/getting-started/… – Cal Irvine Commented Dec 9, 2021 at 15:50 - Thank you. it was helpful send this ment as an answer I will mark it as correct – Sky Walker Commented Dec 9, 2021 at 15:58
1 Answer
Reset to default 3Try having your ternary inside the public <Routes> instead of having 2 seperate Routes
<Routes>
{isAdmin ? (
<Route
path="/dashboard"
element={
<Suspense fallback={<Loading />}>
<Dashboard />
</Suspense>
}>
...)
:(...)
<Route path="/" element={<Header />}>
<Route
index
element={
<>
<ScrollToTop />
<Home />
</>
}
/>
....
</Route>
</Routes>