0

I want to simply redirect the user to '/login' who is not logged in and tries to go a route that is designed for logged in user. Vice versa but redirect to '/'

I heard that react-router-v6 does things differently , even tried using chatGPT who just kept me going in a bunch of loops for different error.

[navigate just refers to useNavigate() ]
let routes;
          if (isLoggedIn) {
            routes = (
              <React.Fragment>
                <Route exact path="/" element={<Searchbar changeHeader={setHeader} />} />
                <Route path="/Result" element={<Result changeHeader={setHeader} topic={header} />} />
                <Route path="/Chatbox/:sID" element={<Chatbox />} />
                <Route path="/Assist" element={<Assist changeHeader={setHeader} />} />
                navigate('/')
              </React.Fragment>
            );
          } else {
            routes = (
              <React.Fragment>
                <Route exact path="/" element={<Searchbar changeHeader={setHeader} />} />
                <Route path="/Result" element={<Result changeHeader={setHeader} topic={header} />} />
                <Route path="/Login" element={<LoginForm />} />
                navigate('/login')
              </React.Fragment>
            );
        }
        this is the return component 
         return (
            <AuthContext.Provider value={{ isLoggedIn: isLoggedIn, login: login, logout: logout }}>
              <Router>
              
                <div className="App">
                  {/* This is the main NAVBAR */}
                  <Navbar header={header} headersetter={setHeader} />
        
                  <div className="aSearch">
                    <Routes>
                      {routes}
                    </Routes>
                  </div>
                </div>
              </Router>
            </AuthContext.Provider>
          );
        }
        
        I tried using useHistory() but that wouldn't be possible cause not all routes have already been visited. Tried to use bunch of if conditions but made the code way messier
Sahil Karn
  • 1
  • 1
  • Why are you trying to call `navigate()` within the JSX? – Phil Jun 21 '23 at 01:15
  • that was because I just wanted the user to be navigated if they try to react a route that they're not suppose to if they're logged in or not. – Sahil Karn Jul 01 '23 at 18:37

1 Answers1

-1

Are there any reasons for using context in your router? It seems like something weird to me.

<Route
  path="page1"
  element={
    <PrivateRoute isLoggedIn={isLoggedIn}>
      <Page1 />
    </PrivateRoute>
  }
/>

It is PrivateRoute :

const PrivateRoute = ({ isLoggedIn, children }) => {
  if (!isLoggedIn) {
    return <Redirect path="/login"/>
  }
  return children
}
Humanoid Mk.12
  • 160
  • 7