React Router v5调用history.push跳转后组件不渲染问题求助

问题根因 #

这个问题不是React Router版本的bug，是路由配置冲突导致的。
你在入口代码里同时使用了BrowserRouter和手动实例化的Router组件，并且给Router传入了自己创建的history实例。而BrowserRouter本身内部会自动创建一个独立的history实例，这就导致项目里存在两个无关联的history实例：

• 存在store里、调用push方法的是你手动创建的history实例，修改时只会同步更新浏览器地址栏
• 监听路径变化、控制路由组件渲染的是BrowserRouter内部生成的history实例，感知不到自定义实例的变更，自然不会触发组件重渲染。

解决方案 #

直接删掉外层多余的BrowserRouter标签即可，你已经手动创建了history实例，直接用底层的Router组件传入这个实例就能正常工作。
修改后的入口代码如下：

startup().then(x => {
    const root = document.getElementById('root');
    console.log(x);
    const history = x.rootStore.history;

    reactRender(
        <>
            <Provider history={x.rootStore.history} rootStore={x.rootStore}>
                <Router history={history}>
                    <Route exact path='/' component={HomePage}/>
                    <Route exact path='/about' component={AboutComponent}/>
                </Router>
            </Provider>
        </>,
        root
    );
}).catch(e => {
    console.log(e);
    alert('can not initialize application')
})

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