`No routes matched location "/" ` warning shown on the console

user_14324634 0
Viewed 223

I am trying to implement a small project and got an error/warning like above title.

Here is my Index.jsx:

import React, { Suspense } from "react";
import ReactDOM from "react-dom";
import { Provider } from "react-redux";
import { BrowserRouter} from "react-router-dom";

import { App } from "./components/app";

ReactDOM.render(
  <React.StrictMode>
    <Provider store={store}>
      <Suspense fallback={<div>Loading...</div>}>
        <BrowserRouter>
          <App />
        </BrowserRouter>
      </Suspense>
    </Provider>
  </React.StrictMode>,
  document.getElementById("root")
);

App.jsx:

import React, { useEffect } from "react";
import { makeStyles } from "@material-ui/core/styles";
import { Container } from "@material-ui/core";
import { ToastContainer } from "react-toastify";
import { Route, Routes } from "react-router-dom";
import { useSelector, useDispatch } from "react-redux";

import Sidebar from "../sidebar/Sidebar";
import TopNav from "../topnav/TopNav";
import { AppRoutes } from "../AppRoutes";

import ThemeAction from "../../store/actions/ThemeAction";

import "./App.scss";

const useStyles = makeStyles({
  contentStyle: {
    margin: "30px auto",
  },
});

export const App = () => {
  const themeReducer = useSelector((state) => state.ThemeReducer);
  const classes = useStyles();
  const dispatch = useDispatch();

  useEffect(() => {
    const themeClass = localStorage.getItem("themeMode", "theme-mode-light");

    const colorClass = localStorage.getItem("colorMode", "theme-mode-light");

    dispatch(ThemeAction.setMode(themeClass));

    dispatch(ThemeAction.setColor(colorClass));
  }, [dispatch]);

  return (
    <Routes>
      <Route
        render={(routeProps) => (
          <div className={`app ${themeReducer.mode} ${themeReducer.color}`}>
            <Sidebar routeProps={routeProps} />
            <div className="app__content">
              <TopNav />
              <div className="app__content-main">
                <ToastContainer />
                <Container className={classes.contentStyle} maxWidth="sm">
                  <AppRoutes />
                </Container>
              </div>
            </div>
          </div>
        )}
      />
    </Routes>
  );
};

And AppRoutes.jsx:

import React from "react";

import { Route, Routes } from "react-router-dom";

import Customers from "../pages/Customers";
import { Dashboard } from "../pages/Dashboard";
import { UserLogin } from "./User/Login";
import { UserSignup } from "./User/Signup/UserSignup";

export const AppRoutes = () => {
  return (
    <Routes>
      <Route index path="/" element={<Dashboard />} />
      <Route path="customers" component={<Customers />} />
      <Route path="userLogin" element={<UserLogin />} />
      <Route path="userSignup" element={<UserSignup />} />
    </Routes>
  );
};

And the project is not running) I mean white blank on browser window while there is no error except index.tsx:25 No routes matched location "/" .

react-router-dom redux react-hooks reactjs
1 Answers

In react-router-dom@6 there are no longer any render (or component or children function props). Remove the Routes and Route component in App. You will also update Sidebar to access the location object via hook.

App

return (
  <div className={`app ${themeReducer.mode} ${themeReducer.color}`}>
    <Sidebar routeProps={routeProps} />
    <div className="app__content">
      <TopNav />
      <div className="app__content-main">
        <ToastContainer />
        <Container className={classes.contentStyle} maxWidth="sm">
          <AppRoutes />
        </Container>
      </div>
    </div>
  </div>
);

Sidebar

const Sidebar = () => {
  const location = useLocation();
  const activeItem = sidebar_items.findIndex(
    (item) => item.route === location.pathname
  );

  return (
    <div className="sidebar">
      <div className="sidebar__logo">
        <img src={logo} alt="company logo" />
      </div>
      {sidebar_items.map((item, index) => (
        <Link to={item.route} key={index}>
          <SidebarItem
            title={item.display_name}
            icon={item.icon}
            active={index === activeItem}
          />
        </Link>
      ))}
    </div>
  );
};

AppRoutes

Remove the index prop from the "/" route. When you specify an index route the path prop is ignored. Also, make sure all the routes are correctly using the element prop.

<Routes>
  <Route path="/" element={<Dashboard />} />
  <Route path="customers" element={<Customers />} />
  <Route path="userLogin" element={<UserLogin />} />
  <Route path="userSignup" element={<UserSignup />} />
</Routes>

Edit no-routes-matched-location-warning-shown-on-the-console

user_86908570
Related