React js useEffect 不更新位置路径名更改时的 useState 值？

Question

Reactjs useEffect 不更新位置路径名更改时的 useState 值。我有两个 clientLayout 和 AdminLayout 我根据 useState 将客户端切换到管理布局 这不是更改路线或位置路径的更新。它是多布局概念。

import ClientLayout from './views/client-views/client-layout/index.js';
import AdminLayout from './views/admin-views/admin-layout/index';
import Layout from './views/layouts/Layout';
import {BrowserRouter as Router,useLocation} from 'react-router-dom';
import React,{useState,useEffect} from 'react';
import 'bootstrap/dist/css/bootstrap.min.css';

function App() {

      const[clientLayout,setClientLayout] = useState(false);
      const location = useLocation();
      useEffect(()=>{
         let location = window.location.pathname;
         let pathname = location.split('/');
         if(pathname[1] == 'client'){
           setClientLayout(true)
       }
     },[window.location.pathname])


  return (
    <div className="App">
       <Router>
     {
       clientLayout ? <AdminLayout /> : <ClientLayout />
     }
       
       </Router>
      
    </div>
  );
}

export default App;

Answer 1

尝试使用 location 代替 window.location：

const location = useLocation();
useEffect(() => {
  let pathname = location.pathname.split("/");
  if (pathname[1] == "client") {
    setClientLayout(true);
  }
}, [location.pathname]);