我正在尝试使用 react-router-dom v5 创建受保护/私有路由，如此处的链接所示，我仅使用我需要的代码 - Protected routes and authentication with React Router v5。
现在我需要两个组件相互私有
问题：从Home 组件获取SignUp 组件后我可以回到SignUp 而那不是我想要的。

注册是第一页（作为登录）。如果用户已经注册并出现在 Home 组件中，我不希望他返回叹息组件。

工作网站项目在这里 - CodeSandbox
有谁知道如何使这两个组件都受到保护/私有？

GuardedRoute.jsx

function GuardedRoute({ children,auth,...rest }) {
  return (
    <Route
      {...rest}
      render={() => {
        return auth === true ? children : <Redirect to="/signup" />;
      }}
    />
  );
}

export default GuardedRoute;

App.js

const App = () => {
  const [userID,setUserID] = useState('');
  const [userSignedUp,setIfSignUp] = useState(false);
  return (
    <div classname="App-div">
      <GuardedRoute exact path="/home" auth={userSignedUp}>
        <Home userIDNumber={userID} setIfSignUp={setIfSignUp} />
      </GuardedRoute>
      <Switch>
        <Route path="/signup">
          <SignUp setUserNumber={setUserID} setIfSignUp={setIfSignUp} />
        </Route>
      </Switch>
    </div>
  );
};

export default App;

请在发布您的答案之前在我的代码和框中尝试您的任何解决方案，因此我们不会仅在理论上尝试解决方案而徒劳:)