通过window.location.pathname渲染组件不更新的修复方案咨询

你当前通过window.location.pathname判断渲染组件的方式存在问题：React组件不会自动监听浏览器地址栏路径的变化，即便路径更新了，只要组件的state或props没改变，就不会重新执行渲染逻辑，所以组件无法自动切换。

以下是两种可行的解决办法：

方案一：使用React Router的useLocation钩子（推荐） #

如果你的项目基于React Router构建，用官方提供的useLocation钩子来获取路径，它会在路径变化时自动触发组件重新渲染：

1. 先导入钩子：

import { useLocation } from 'react-router-dom';

2. 在组件内部获取当前路径：

const location = useLocation();

3. 修改渲染判断逻辑，用location.pathname替代window.location.pathname：

return (
    <>  
      <Navbar style={{position:"sticky"}} ammount={safedIds.length} setShowCalendar={setShowCalendar} />
      <DateBar date={currentDate? currentDate:"no date available"} />
      {eventsPrep.length > 0 ? 
        location.pathname === "/calendar" ?
        <Calendar />
        :
        <Home events={eventsPrep} addSafedId={addSafedId} />
      : <></>}
    </>
);

方案二：手动监听路径变化（无React Router场景） #

如果没使用React Router，需要手动监听浏览器的popstate事件，更新组件state来触发重新渲染：

1. 在组件中添加state和监听逻辑：

import { useState, useEffect } from 'react';

// ... 其他组件代码
const [pathname, setPathname] = useState(window.location.pathname);

useEffect(() => {
  const handlePathChange = () => {
    setPathname(window.location.pathname);
  };
  // 监听浏览器前进/后退事件
  window.addEventListener('popstate', handlePathChange);
  // 组件卸载时移除监听，避免内存泄漏
  return () => window.removeEventListener('popstate', handlePathChange);
}, []);

2. 用state中的pathname做渲染判断：

return (
    <>  
      <Navbar style={{position:"sticky"}} ammount={safedIds.length} setShowCalendar={setShowCalendar} />
      <DateBar date={currentDate? currentDate:"no date available"} />
      {eventsPrep.length > 0 ? 
        pathname === "/calendar" ?
        <Calendar />
        :
        <Home events={eventsPrep} addSafedId={addSafedId} />
      : <></>}
    </>
);

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