React js useEffect not updating useState value on location pathname change?

Question

Reactjs useEffect not updating useState value on location pathname change.I have two clientLayout and AdminLayout I switch client to admin layout on the base of useState which is not update on change route or location path.It's multi layout concept.

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

Try using location instead of window.location:

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