從應用程序中的任何路由刷新時總是被重定向到“/”

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掛鈎以編程方式處理重定向。