React 中的条件站点加载

Question

在我的 React-Web-App 中，我面临着条件加载无法按照我想要的方式工作的问题。我希望登录页面成为用户看到的第一个页面。如果用户没有帐户，则有一个注册按钮。但是，我提出了一个条件，如果用户未登录，则仅应显示登录页面（因此只有此页面应可见，而其他页面（例如“主页”）不可访问。）以下是该条件的代码：

const renderAuthButton = () => {
    if (auth.authState) {
      // User is logged in, display logout button
      return (
      <div>
      <Link to="/" className="homeCSS">Home Page</Link>
      <Link to="/logout" className="logoutCSS">Logout</Link>
      </div>
      )
    } else { 
      // User is not logged in, display login button
      return <Navigate to="/login"/>
    }
  };

  return (
    <>
      {renderAuthButton()}
    </>
  );
}

现在，由于这种情况，注册页面也无法访问，我找不到让它工作的方法。如果它提供任何帮助，这是功能应用程序：

function App() {
const auth = useAuth();
  return (
      <Router>
          <AuthProvider>
          <aside className="aside1"></aside>
          <header className="header">
            <Navigation />
          </header>
          <main className="main">
          <Routes>
          <Route path="/" exact element={<Home />} />
            <Route path="/thread/:id" exact element={<Thread />} />
            <Route path="/createthread" exact element={<CreateThread/>} />
            <Route path="/login" element={<Login />} />
            <Route path="/register" element={<Registration />} />
            <Route path="/logout" element={<Logout />} />
          </Routes>
          </main>
          <aside className="aside2"> 
            <NavigationCreateThread/>
          </aside>
          <footer className="footer"></footer>
          </AuthProvider>
      </Router>
  );
}
export default App;

有人可以提供帮助吗？

Answer 1

也许您可以使用此选项来检查身份验证并渲染用户界面。

          <Route
        path="/xyz"
        element={
          <PrivateRoute>
            Xyz />
          </PrivateRoute>
        }
      />
      <Route
        path="/login"
        element={
          <PublicRoute>
            <Login />
          </PublicRoute>
        }
      />
      <Route
        path="/register"
        element={
          <PublicRoute>
            <Register />
          </PublicRoute>
        }
      />

现在在 public&privateRoute 组件中检查用户是否登录？如果登录，则渲染子级，否则重定向到登录。