React路由路径名变化时useEffect未更新useState值（多布局场景）

核心错误原因 #

• useLocation 是React Router提供的Hook，必须在<Router>组件的子组件内部调用，你当前的调用层级在<Router>外层，无法拿到响应式的路由状态
• window.location.pathname不是React的响应式状态，作为useEffect依赖项时React无法感知它的变更，导致useEffect不会触发更新
• 布局判断逻辑写反：路径匹配client时设置clientLayout=true，但渲染时对应了AdminLayout，逻辑倒置
• 已定义的useLocation返回值未被使用，存在冗余变量和命名冲突风险

修正后代码 #

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

// 把路由判断逻辑抽为Router的子组件，满足Hook调用规则
function LayoutSwitcher() {
  const [isClientLayout, setIsClientLayout] = useState(false);
  const location = useLocation();

  useEffect(() => {
    const pathSegments = location.pathname.split('/');
    setIsClientLayout(pathSegments[1] === 'client');
  }, [location.pathname]) // 替换为响应式的路由路径作为依赖项

  // 修正布局对应逻辑
  return isClientLayout ? <ClientLayout /> : <AdminLayout />
}

function App() {
  return (
    <div className="App">
      <Router>
        <LayoutSwitcher />
      </Router>
    </div>
  );
}

export default App;

额外优化建议 #

可以省去额外的状态维护，直接通过路径判断返回对应布局，简化代码：

function LayoutSwitcher() {
  const location = useLocation();
  const isClientPath = location.pathname.split('/')[1] === 'client';
  return isClientPath ? <ClientLayout /> : <AdminLayout />
}

内容的提问来源于stack exchange，提问作者AmirYousaf