Javascript 在React应用程序中使用useState更新路由器值时，重新呈现的错误太多

在

React

应用程序的

Controller.jsx

文件中，我想更改

Route

并显示相关组件。像这样：

function Controller(props) {
  const [path, setPath] = useState("/home/");
  let componentToShow;

    function setPathAndComponent(newPath, newComponent) {
     setPath(newPath);
     componentToShow = newComponent;
    }

  switch (props.args.navigationValue) {
    case 0:
      setPathAndComponent("/home/", <Text />);
      break;

    case 1:
      args = { onClick: showLoginComponent };
      setPathAndComponent("/dashboard/", <Dashboard args={args} />);
      break;

    case 2:
      setPathAndComponent("/admin/");
      break;

    case 3:
      setPathAndComponent("/settings/");
      break;

    default:
      setPathAndComponent("/home/");
      break;
  }

  return (
    <Router>
      <Redirect to={path} />
       <Switch>
        <Route path="/home/">{componentToShow}</Route>
        <Route path="/home/main/">{componentToShow}</Route>
        <Route path="/dashboard/">{componentToShow}</Route>
        <Route path="/login/">{componentToShow}</Route>

      </Switch>
    </Router>
  );
}
export default Controller;

---

我不知道如何预防这种情况。我需要更改整个项目的根路径值，当新的url更改到达时，它应该触发新的更改。

重定向到路径？重定向到路径？

react-dom.development.js:14815 Uncaught Error: Too many re-renders. React limits the number of renders to prevent an infinite loop.