在React App中使用useState更新Router值时出现太多重新渲染错误

Question

在getResult应用的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更改到达时触发新的更改。