React Router v5 的受保护路由不起作用

Question

我正在尝试使用 react-router-dom v5 创建一个 protected/private 路由，就像这里的 link 一样，我只使用了我需要的代码 - Protected routes and authentication with React Router v5.
现在我需要两个组件相互保密
问题：从SignUp组件中获取Home组件后我可以返回SignUp，但这不是我想要的.

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

工作网站项目在这里 - CodeSandbox
任何人都知道如何制作这两个组件 protected/private？

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;

在发布您的答案之前，请在我的 codesandbox 中尝试您的任何解决方案，这样我们就不会只在理论上尝试解决方案而徒劳:)

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 如果用户已登录，它将重定向到某个地方。

React Router v5 的受保护路由不起作用

Protected routes for react router v5 isn't working

routes

protected

reactjs

react-router

react-router-dom

在发布您的答案之前，请在我的 codesandbox 中尝试您的任何解决方案，这样我们就不会只在理论上尝试解决方案而徒劳:)