React Router V4 正在更新 URL，但没有刷新（React、Redux）

Question

我正在尝试使用 React-Router V4 将路由添加到我的应用程序，但它根本不起作用。基本上，我正在尝试使用 history.push 以编程方式更改路由，这会更新浏览器 URL，但不会更改实际应用程序中的任何内容。

注意：我使用的是 redux。

关于这个问题唯一回答的问题是：

但是，我已经尝试了上述问题的答案，但它对我不起作用。

以下是重要的片段：

最上面的文件 (index.js)

...
ReactDOM.render(
    <BrowserRouter>
        <Provider store={store}>
            <App/>
        </Provider>
    </BrowserRouter>
    , document.getElementById('root'));
...

包含路由的组件

...
export default function ContentRouter() {
    return <div className="content">
        <Route exact path="/dashboard" component={TmpDashboard}/>
        <Route exact path="/" component={() => {
            return <h1>Home</h1>
        }}/>
    </div>
}

组件推送路由

...
this.handleGroupClick = (group) => {
    this.props.history.push(`/groups/${group}`);
    this.props.onOpenChange(false);
};
...
export default withRouter(connect(mapStateToProps, mapDispatchToProps(DrawerConnector))

Answer 1

这是一个有效的设置：

主应用程序：

class App extends React.Component {

    render() {
        return (
            <BrowserRouter>
                <div>
                   /* this is a common component and happens to need to redirect */
                   <Route component={CommonComponentThatPushesToHistory} />
                   <div id="body">
                       /* I usually place this switch in a separate Routes file */
                       <Switch>
                           <Route exact path="FooRoute" component={FooPage}/>
                           <Route exact path="BarRoute" component={BarPage}/>
                        </Switch>
                   </div>
                   /* another common component which does not push to history */
                   <Footer />
                </div>
            </BrowserRouter>
        );
    }
}

export default withRouter(App);

CommonComponentThatPushesToHistory

class CommonComponentThatPushesToHistory extends React.Component{
    render(){
        return(
            <button type="button" 
                onClick={() => {this.props.history.push('some-page');}}>
                Click to get redirected</button>
        );
    }
}

FooPage 可能有一个推送到历史记录的子组件：

class FooPage extends React.Component{
    render(){
        return(
            <MyChild history={this.props.history} />
        );
    }
}

然后 MyChild 组件可以像 CommonComponentThatPushesToHistory 一样推送到历史记录。

Answer 2

在完全错误的地方搜索了很多之后，我找出了错误的地方。缺少更新是由 Redux

引起的

每当组件被包裹在 connect 中时，它会导致更新被阻止，并且视图不会更新。

这里提到解决方法：

https://github.com/ReactTraining/react-router/issues/4671#issuecomment-285320076

基本上，每个内部有 Route 或 React-Router 东西的组件都必须用 withRouter

包裹起来

编辑：只有使用 connect 的顶级组件才应该包含在 withRouter 中。请注意，这可能会导致性能问题

编辑：我绕过耦合增加的方法是使用一个组件来处理路由。这样，我只需要包装那个组件，并用路由器包装该组件。

React Router V4 正在更新 URL，但没有刷新（React、Redux）

React Router V4 is updating URL, but not refreshing (React, Redux)

javascript

url-routing

reactjs

react-router