使用react-router-dom 4.0.0时URL变更但页面未跳转需刷新的问题

这种情况我之前也碰到过，大概率是路由的上下文配置出了问题，给你几个排查和解决的方向：

1. 确保所有使用<Link>的组件都在Router内部 #

react-router-dom的<Link>必须在<BrowserRouter>（或<HashRouter>）的包裹范围内才能正常触发路由更新。如果你的按钮组件是在Router的外部渲染的，那点击Link只会改变URL，不会触发组件的重新渲染。

比如，你的根组件渲染时，应该把整个应用都放在Router里面：

// 正确的根组件渲染示例
import { BrowserRouter as Router } from 'react-router-dom';

ReactDOM.render(
  <Provider store={yourStore}>
    <Router>
      {/* 这里放你的所有应用组件，包括用到Link的那个组件 */}
      <App />
    </Router>
  </Provider>,
  document.getElementById('root')
);

2. 检查Provider和Router的嵌套顺序 #

从你的代码片段看，你用到了Redux的<Provider>，注意必须是Provider包裹Router，而不是反过来。这样Router内部的所有组件才能访问到Redux store，同时路由系统也能正常工作。如果顺序反了，可能会导致路由上下文失效。

3. 不要直接使用基础的<Router>组件 #

在react-router-dom 4.x中，<Router>是底层组件，需要手动传入history对象。如果你没有正确配置history，就会出现URL变了但页面不更新的情况。建议直接使用封装好的<BrowserRouter>或<HashRouter>，它们自带了默认的history配置，开箱即用。

4. 检查是否存在多个Router实例 #

如果你的应用中不小心嵌套了多个<BrowserRouter>（比如在某个子组件里又套了一层Router），会导致路由上下文冲突，Link触发的路由更新无法被正确的Route捕获，自然不会跳转。确保整个应用只有一个Router根实例。

最后再确认你的Route配置 #

确保你已经正确定义了/posts/new对应的路由组件，比如：

<Switch>
  <Route path="/posts/new" component={NewPostComponent} />
  {/* 其他路由... */}
</Switch>

按照上面的步骤排查，应该就能解决问题啦！

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