React-router v4 BrowserRouter 跳转时url已经变化了页面没变化，再手动刷新对应路由页面才正确跳转

Question

webpack配置了historyfallback:

感谢大家的回答！但是新问题又来了，假如上面包含Link的Header组件跟下面Route的那部分不在同一个组件那应该怎么路由呢，例如这样：
Header：

index：

刚接触RR4和BrowserRouter不太了解

Answer 1

因为你的Router中还有一层Router，去掉就好了

---

import React, { Component } from 'react'
import {
  BrowserRouter as Router,
  Link,
  Route
} from 'react-router-dom'

const App = () => (
  <Router>
    <div className="App">
      <Header />
      <div className="content">
        <Route exact path="/" component={() => <h1>Main Page</h1>}></Route>
        <Route path="/bodyIndex" component={() => <h2>Body Page</h2>}></Route>
      </div>
    </div>
  </Router>
)

const Header = () => (
  <ul>
    <li><Link to="/">Home</Link></li>
    <li><Link to="/bodyIndex">Body</Link></li>
  </ul>
)

export default App

没必要每次用到react-router-dom就包一层Router，只要保证最外层有一个Router就行了。

Answer 2

内层的<Router></Router>去掉。