React Router问题：路由切换时页面未重新渲染

嘿，我之前也碰到过一模一样的问题！这种情况大多是路由匹配逻辑的小细节没处理好，咱们一步步排查解决：

• 给默认路由加上exact属性
  Switch组件是按从上到下的顺序匹配路由的，只要找到第一个匹配的Route就会渲染它。如果你的第一个Route路径是/，那访问任何以/开头的路径（比如/about）都会优先匹配到这个默认路由，导致页面一直显示第一个组件。解决方法很简单，给第一个Route加上exact属性，让它只有在路径完全匹配/的时候才渲染：

  <Route exact path="/" component={Home} />
  

• 检查NavLink的to属性路径
  确保NavLink的to用的是绝对路径（比如to="/about"），而不是相对路径（to="about"）。相对路径可能会导致路由跳转后路径叠加，匹配不到正确的Route。

• 确认所有Route都在Switch内部
  要是有Route被放在Switch外面，不管路径是否匹配，它都会一直渲染在页面上。所以一定要把所有需要切换的Route都包裹在Switch组件里。

• 检查组件导入是否正确
  别犯低级错误哦！确认Switch、Route、NavLink都是从react-router-dom正确导入的，没有拼写错组件名称（比如把Switch写成了Switcher）。

给你一个正确的示例结构参考：

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

function Home() {
  return <h1>首页组件</h1>;
}

function About() {
  return <h1>关于组件</h1>;
}

function App() {
  return (
    <div className="App">
      <nav>
        <NavLink to="/" exact activeClassName="active">首页</NavLink>
        <span> | </span>
        <NavLink to="/about" activeClassName="active">关于</NavLink>
      </nav>
      <Switch>
        <Route exact path="/" component={Home} />
        <Route path="/about" component={About} />
      </Switch>
    </div>
  );
}

export default App;

按照上面的步骤调整后，路由切换应该就能正常工作啦！

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