react-router v4 路由页面的问题，点击按键地址Url改变，但是需要手动刷新才能跳转显示

Question

问题如标题所述，点击跳转按键时浏览器可以获取到正常地址，但是需要手动刷新才能正常显示页面，具体代码如下：

routeMap.jsx

class RouteMap extends Component {
    render(){
        return (
            <BrowserRouter>
            <App>
                <Switch>
                    <Route exact path="/" component={Home}/>
                    <Route path="/city" component={City}/>
                    <Route path="/user" component={User}/>
                    <Route path="/search/:type(/:keyword)" component={Search}/>
                    <Route path="/detail/:id" component={Detail}/>
                    <Route path="*" component={NotFound}/>
                    <Redirect from="/" to="/city"/>
                </Switch>
            </App>
            </BrowserRouter>
        )
    }
}

export default RouteMap;

./HomeHeader/index.jsx

class HomeHeader extends React.Component {
    constructor(props, context) {
        super(props, context);
        this.shouldComponentUpdate = PureRenderMixin
            .shouldComponentUpdate
            .bind(this);
    }
    render() {
        
        return (
                <div id="home-header" className="clear-fix">
                    <div className="home-header-left float-left">
                        <Link to="/city">
                        <span>{this.props.cityName}</span>
                        &nbsp;
                        <i className="anticon anticon-down"></i>
                        </Link>
                    </div>
                    <div className="home-header-right float-right">
                        <Avatar shape="square" size="small" icon="user"/>
                    </div>
                    <div className="home-header-middle">
                    <div className="search-container">
                        <i className="anticon anticon-search"></i>
                        <input type="text" placeholder="请输入搜索的关键字"/>
                    </div>
                </div>
            </div>
        )
    }
}

export default HomeHeader;

谢谢

Answer 1

import { withRouter } from 'react-router'
app上面加个withRouter

Answer 2

<BrowserRouter>下面只能由一个子节点，你现在有两个<App>节点，删掉一个试试。另外，第二个<App>节点后不需要加大括号，里面又没有JS表达式。

Answer 3

App在export的时候加上withRouter就可以了， 我开始也是一样的问题