admin管理员组

文章数量:1394203

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

  • javascript
  • reactjs
  • react-router
  • react-router-dom
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 one Routes ponent. The first Routes has no child Route that matches '/' but the second one does. Wrap the whole thing in one Routes and 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 one Routes and using layout Routes. 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
Add a ment  | 

1 Answer 1

Reset to default 3

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

本文标签： javascriptNo routes matched location quotquot react router v6Stack Overflow

版权声明：本文标题：javascript - No routes matched location &quot;&quot; react router v6 - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1744707846a2620947.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。