Maximum update depth exceeded. No useState or useEffect

Question

Can't figure this one out. Nav Links and Router Links are pulled from JSON data as a map.

Error:

Warning: Maximum update depth exceeded. This can happen when a component calls setState inside useEffect, but useEffect either doesn't have a dependency array, or one of the dependencies changes on every render.

Can't figure out what is causing the re-render.

App.js

import "./App.css";
import Nav from "./Comp/Nav";
import { BrowserRouter as Router } from "react-router-dom";
import RouterPaths from "./Comp/Routes/RouterPaths";

function App() {
  return (
    <Router>
      <div className="App">
        <Nav />
        <RouterPaths />
      </div>
    </Router>
  );
}

export default App;

Routers.js

import React from "react";
import { Routes, Route, useLocation, Navigate } from "react-router-dom";
import Clone from "../Pages/Clone";
import data from "../../PageData";

export default function RouterPath() {
  let location = useLocation();
  return (
    <div className="lg:pt-12">
      <Routes location={location} key={location.pathname}>
        <Route path="/" element={<Navigate replace to="/" />} />
        {data.NavLinks.map((items, index) => {
          return <Route exact path={items.Link} element={<Clone test={items.Name} />}></Route>;
        })}
      </Routes>
    </div>
  );
}

Nav.js

import React from "react";
import { Link } from "react-router-dom";
import data from "../PageData";

export default function Nav() {
  return (
    <div className="fixed w-12 h-screen flex flex-col gap-8 justify-between items-center py-20 bg-teal-800 lg:flex-row lg:gap-4 lg:h-12 lg:w-screen lg:px-20 lg:py-0">
      {data.NavLinks.map((item, index) => {
        return (
          <div className="-rotate-90 lg:rotate-0 w-24" key={index}>
            <Link to={item.Link} className="NavListItemLink">
              {item.Name}
            </Link>
          </div>
        );
      })}
    </div>
  );
}

Clone.js

import React from "react";

export default function Clone({ test }) {
  return <div>{test} asdf</div>;
}

Everything seems to be in the right place. I am just stuck with this issue. I've tried removing JSON dependency, same issue. Tried removing .map() function, same issue.

Answer 1

The RouterPath component is unconditionally rendering from the home "/" route path to itself.

<Route path="/" element={<Navigate replace to="/" />} />

This is the render loop. You should not redirect a path to itself. Remove this route.

export default function RouterPath() {
  let location = useLocation();
  return (
    <div className="lg:pt-12">
      <Routes location={location} key={location.pathname}>
        {data.NavLinks.map((items) => (
          <Route
            key={items.Link}
            path={items.Link}
            element={<Clone test={items.Name} />}
          />
        ))}
      </Routes>
    </div>
  );
}

If you are looking for a "catch-all" route then render a redirect to <Route path="*" element={<Navigate replace to="/" />} /> and ensure you are still rendering a required component on "/" .

Example:

export default function RouterPath() {
  let location = useLocation();
  return (
    <div className="lg:pt-12">
      <Routes location={location} key={location.pathname}>
        {data.NavLinks.map((items) => (
          <Route
            key={items.Link}
            path={items.Link}
            element={<Clone test={items.Name} />}
          />
        ))}
        <Route path="/" element={<HomePage />} /> // <-- you may need to create this component
        <Route path="*" element={<Navigate replace to="/" />} />
      </Routes>
    </div>
  );
}