反应路由器 v5 的受保护路由不起作用

Question

我正在尝试使用 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;

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

Answer 1

您可以使 signup 路由仅在用户未登录时存在，然后使用将重定向到 /home 的全能路由

<div className="App-div">
  <Switch>
    {!userSignedUp && (
      <Route path="/signup">
        <SignUp setUserNumber={setUserID} setIfSignUp={setIfSignUp} />
      </Route>
    )}
    <GuardedRoute path="/home" auth={userSignedUp}>
      <Home userIDNumber={userID} setIfSignUp={setIfSignUp} />
    </GuardedRoute>

    <Route path="/">
      <Redirect to="/home" />
    </Route>
  </Switch>
</div>

更新示例：https://codesandbox.io/s/jolly-https-t7dmj?file=/src/containers/App.js

---

或者您可以将逻辑封装到另一个组件中，例如 GuardedRoute，比如 UnguardedRoute，如果用户登录，它将重定向到某个地方。