带有 redux 的 React router v4 无法重新渲染组件

Question

推送新位置时，我在渲染组件时遇到困难。

使用这些版本：

"react": "^16.5.2",
"react-router-dom": "^4.3.1",
"redux": "^4.0.0"

Base.js

<div >
    <Header />
    <div id="contentwrapper">
        <BrowserRouter>
            <Switch>
                <Route exact path='/' component={Home} />
                <Route path='/service/details/:id' render={(props) => (
                            <ServiceDetails key={props.match.params.id} {...props} />)
                        } />
            </Switch>
        </BrowserRouter>
    </div>
    <Footer id="footer" />
</div>

我是怎么推送位置的：

正在从 <Header> 组件推送位置，其中 connect 用 react-router-dom 中的 withRouter 包装：(export default withRouter(connect(mapStateToProps, mapDispatchToProps)(Header));)

var route = "/service/details/" + value        
this.props.history.push(route)

子组件 (ServiceDetails.js)

import React from 'react';
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';
import _ from 'lodash';

import { getServiceDetailsAction } from '../actions/ServiceActions';
import { getServiceDetails } from '../requests/ServiceAxios';

class ServiceDetails extends React.Component {

    // constructor

    componentWillReceiveProps(newProps) {
       debugger;
    }
    render() {
        return (
            <div>
                Service details: {this.props.location.pathname.substring(this.props.location.pathname.lastIndexOf('/') + 1)}
            </div>
        )
    }
}

function mapStateToProps(state) {
    return {
        serviceStore: state.ServiceReducer
    };
}

function mapDispatchToProps(dispatch) {
    return bindActionCreators({
        getServiceDetailsAction: getServiceDetailsAction
    }, dispatch);
}

export default connect(mapStateToProps, mapDispatchToProps)(ServiceDetails);

link 在浏览器的 url 栏中正确更新，但组件未呈现。此外，子组件的 componentWillReceiveProps 在整个应用程序加载时仅被调用一次。

当前行为：

this.props.history.push("/service/details/5")
页面呈现 Service details: 5
this.props.history.push("/service/details/262")
页面仍然显示Service details: 5

我做错了什么？

Answer 1

您的 Header 组件不在路由器提供程序组件中，将您的 Header 包装在 BrowserRouter 组件

中

<BrowserRouter>
    <div >
        <Header />
        <div id="contentwrapper">
           <Switch>
               <Route exact path='/' component={Home} />
               <Route path='/service/details/:id' render={(props) => (
                                <ServiceDetails key={props.match.params.id} {...props} />)
                            } />
           </Switch>
        </div>
        <Footer id="footer" />
    </div>

</BrowserRouter>

带有 redux 的 React router v4 无法重新渲染组件

React router v4 with redux not able to re-render component

reactjs

react-router

react-redux

react-router-v4