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 i m 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?
