React Router配合Semantic UI React点击导航URL更新但组件不加载问题

问题原因 #

你项目中使用React Router提供的Link组件实现跳转，Link只会修改浏览器地址栏和历史记录、不触发页面整页刷新，但你自定义的Route组件直接读取window.location.pathname做判断，这个值的变化不会触发React组件重新渲染，所以路由变更后页面不会更新显示对应内容。

修复方案 #

这里提供两种可选修复方式：

方案一：使用React Router官方Route组件（推荐）

直接用官方封装好的路由组件，不需要自己维护自定义Route逻辑：

1. 删除你自定义的Route组件文件
2. 在App.js顶部引入官方路由组件：

import { Route, Switch } from 'react-router-dom';

3. 修改App.js中的路由渲染逻辑，用Switch包裹所有Route，给首页路由添加exact属性避免路径前缀匹配错误：

function App() {
  return (
    <div className="App">
      <Container style={{marginTop: "20px"}}>
        <Header />
        <Switch>
          <Route exact path="/">
            <AccordionComponent items={items} />
          </Route>
          <Route path="/list">
            <Search />
          </Route>
          <Route path="/dropdown">
            <DropdownForm options={options}/>
          </Route>
          <Route path="/translate">
            <Translate />
          </Route>
        </Switch>
      </Container>
    </div>
  );
}

export default App;

方案二：修改自定义Route组件适配路由变化

如果你需要保留自定义Route逻辑，只需要给它添加路由变化监听即可：

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

const Route = ({ path, children }) => {
  // useLocation会订阅路由变化，地址变更时会触发组件重新渲染
  const location = useLocation();
  return location.pathname === path ? children : null;
};
  
export default Route;

内容的提问来源于stack exchange，提问作者Sercan Noyan Germiyanoğlu