Reactjs 导航栏组件位置不匹配'；使用React路由器，在路由更改时更新

我正在React中构建一个应用程序，并试图在用户导航到其他页面时更新导航栏。但是，检测位置属性的变化是不一致的

如果我转到主页并刷新页面，然后单击Account链接，Account和Navbar location.pathname道具都会按预期从“/”更改为“Account”，控制台会正确写入“change”

如果我随后单击“主页”链接，导航栏将再次正确检测路线更改

但是，如果我现在再次单击“Account”，导航栏的位置不会更新，它仍然是“/”并且不会检测到更改

我看不出这两种情况有什么不同，但在我第一次单击“帐户”时，它始终有效，而不是第二次

我已经阅读了React Router文档，我认为这不是问题所在，因为navbar是顶级组件，我使用“位置”作为道具，我没有使用purecomponent，Account组件也会更新。我想如果这就是问题所在，它永远不会起作用

有谁能建议我如何让导航栏在路线改变时始终如一地检测？谢谢大家!

Navbar.js：

class Navbar extends Component {
    constructor(props) {
        super(props);
    }

    componentDidUpdate = (prevProps) => {
        console.log('***');
        console.log('nav old pathname', prevProps.location.pathname);
        console.log('nav new pathname', this.props.location.pathname);

        if (prevProps.location.pathname !== this.props.location.pathname) {
            // this usually doesn't trigger on navigate
            console.log('change');
        }
    }

    render() {
        ...render my html
    }
}

export default connect(mapStateToProps)(withRouter(Navbar));

App.js：

const App = () => (
    <Provider store={store}>
        <Router>
            <div>
                <Navbar />
                <div className="container">
                    <Route exact path="/" component={Home} />
                    <Route exact path="/account" component={Account} />
                </div>
            </div>
        </Router>
    </Provider>
);

export default App;

从react路由器dom导入交换机到你的App.js

从'react Router dom'导入{BrowserRouter as Router，Route，Switch}
常量应用=（）=>(
);
导出默认应用程序；

不要忘记导入导航栏，主页，以及帐户

---

问题出在这一行：

export default connect(mapStateToProps)(withRouter(Navbar));

您使用的不是

PureComponent

，而是redux

connect

。您可以通过以下方式解决此问题：

1.颠倒成分：

export default withRouter(connect(mapStateToProps)(Navbar));

2.在

mapStateToProps

中向下传递位置道具：

const mapStateToProps(state, ownProps) {
   return {
      location: ownProps.location
   }
}

---

谢谢你的建议，但没什么不同。谢谢！我试过把构图倒过来，但没有用那种方式把位置传下去。

export default withRouter(connect(mapStateToProps)(Navbar));

const mapStateToProps(state, ownProps) {
   return {
      location: ownProps.location
   }
}