从应用程序中的任何路由刷新时总是被重定向到“/”

Question

所以，一切正常我在登录后被重定向到主页，问题是当我从任何路由刷新页面时，我总是被重定向到“/”，如果我在“/products”中并刷新页面我重定向到“ /"

我的 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;

我尝试使用{admin !== null && (the routes here)}并且它可以工作，但是当我注销应用程序时，我不会重定向到登录页面“/login”并且仍然在我注销的页面中。

有人能帮助我吗？

Answer 1

您的页面流程有一些问题，首先，您需要在应用程序呈现自身时知道 admin 是否为 null。 在初始化序列中，您的应用程序将 admin 设置为 null，并且您正在运行异步任务以在您的应用程序已经呈现时获取管理员状态。

您需要等待应用程序处理管理员是否为 null，您可以创建一个缓冲区页面来进行检查并进行渲染，或者您可以简单地使用react-router-dom中的useLocation挂钩以编程方式处理重定向。