Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – Conditional Site-loading in React

In my React-Web-App I am facing the problem that the conditional loading isn’t working like I want it to. I want the Login page to be the first page a user sees. If the user doesn’t have an account, there is a register Button. However, I made a condition that if a user is not logged in, only the Login page should be displayed (so only this page should be visible and other pages like "home" are not accessible.) Here is the code for the condition:

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()}
    </>
  );
}

Now, the register page is also not accessible because of that condition and I cannot find a way to make it work. Here is the function App if it provides any help:

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;

Anyone can provide any help?

Tags:

2

Answers


  1. 0

    May be you can use this option to check auth & render the ui.

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

    Now inside public&privateRoute component check user is logged in or not? If logged in render the children else redirect to login.

    Login or Signup to reply.
  2. 0

    try removing exact from other routes except the homepage

    <Route path="/" exact element={<Home />} />
            <Route path="/thread/:id"  element={<Thread />} />
            <Route path="/createthread"  element={<CreateThread/>} />
            <Route path="/login" element={<Login />} />
            <Route path="/register" element={<Registration />} />
            <Route path="/logout" element={<Logout />} />
          </Routes>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search