Always getting redirected to "/" on refresh from any route in app

Question

So, everything works great I am redirected to homepage after login, the problem is when i refresh the page from any route i am always getting redirected to "/", if i am in "/products" and refresh the page im redirected to "/"

my App.js:

import Sidebar from "./components/sidebar/Sidebar";
import Topbar from "./components/topbar/Topbar";
import "./App.css";
import Home from "./pages/home/Home";
import { BrowserRouter as Router, Switch, Route, Redirect } from "react-router-dom";
import UserList from "./pages/userList/UserList";
import User from "./pages/user/User";
import NewUser from "./pages/newUser/NewUser";
import ProductList from "./pages/productList/ProductList";
import Product from "./pages/product/Product";
import NewProduct from "./pages/newProduct/NewProduct";
import Login from "./pages/login/Login";
import { userRequest } from "./requestMethods";

function App() {

  const [admin, setAdmin] = useState(null)

  useEffect(() => {
    const verifyUser = async () => {
      try {
        const res = await userRequest.get('/verify')
        setAdmin(res.data)
      } catch (error) {
        console.log(error)
      }
    }
    verifyUser()
  }, [])

  return (
    <div>
    <Router>
      <Switch>
        <Route path="/login">
            {admin ? <Redirect to="/" /> : <Login/> }
          </Route>
      { admin !== null ? (
       <>
       <Topbar />
      <div className="container">
        <Sidebar />
          <Route exact path="/">
            <Home />
          </Route>
          <Route path="/users">
            <UserList />
          </Route>
          <Route path="/user/:userId">
            <User />
          </Route>
          <Route path="/newUser">
            <NewUser />
          </Route>
          <Route path="/products">
            <ProductList />
          </Route>
          <Route path="/product/:productId">
            <Product />
          </Route>
          <Route path="/newproduct">
            <NewProduct />
          </Route>
          
      </div> </>) : <Redirect to="/login"/>}
        </Switch>
    </Router>
    </div>
  );
}

export default App;

i try to use {admin !== null && (the routes here)} and it works but when i logout the application im not redirect to the login page "/login" and still in the page that i logged out.

can someone help me please?

Answer 1

Your page flow has some issues, first of all, you need to know whether admin is null or not while app renders itself. In the initialization sequence, your app sets admin to null, and you are running an async task to get admin status while your app is already rendered.

You need to wait for app to handle whether admin is null or not, you can create a buffer page that does the checkup and do the rendering or you can simply use useLocation hook in react-router-dom to handle redirections programmatically.