React路由跳转后URL变更但ItemDetail组件未渲染问题

看起来你遇到的问题是路由URL变化了，但组件没有正确切换，核心原因是你把<ItemList />放在了<Switch>组件的外部——这会导致不管路由怎么跳转，ItemList都会一直挂载在页面上，而Switch里的ItemDetail虽然会被渲染，但它会出现在ItemList的下方（或者被遮挡），让你误以为组件没切换。

修复步骤： #

只需要把Switch外面的<ItemList />移除，让ItemList仅通过Switch内部的路由来渲染即可。修改后的App.js代码如下：

render() {
  return (
    <Router>
      <div className="App">
        <AppContext.Provider value={{ state: this.state }}>
          <Switch>
            <Route path="/detail/:id" component={ItemDetail} />
            <Route exact={true} path="/" component={ItemList} />
          </Switch>
        </AppContext.Provider>
      </div>
    </Router>
  );
}

为什么这样能解决问题？ #

<Switch>组件的作用是只渲染第一个匹配当前路由的子Route组件：

• 当你在首页（/）时，Switch会匹配到第二个Route，渲染ItemList；
• 当你点击链接跳转到/detail/:id时，Switch会匹配到第一个Route，渲染ItemDetail，同时原来的ItemList会被自动卸载，这样页面就会完全切换到详情组件。

另外，确保你已经正确导入了react-router-dom中的所有相关组件（Router、Switch、Route、Link），如果之前没导入的话，记得在对应的文件顶部添加导入语句，比如：

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

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