导航栏组件位置在路由更改时不会更新，使用 React 路由器

Question

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

如果我转到主页并刷新页面，然后单击"帐户"链接，则帐户和导航栏位置.pathname prop 都从"/"更改为"帐户"，正如预期的那样，并且控制台正确写入"更改"。

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

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

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

我已经阅读了有关阻止组件的 React Router 文档，我认为这不是问题所在，因为导航栏是顶级组件，我使用"位置"作为道具，我没有使用纯组件，并且帐户组件确实更新。我想如果这是问题所在，它永远不会奏效？

任何人都可以建议如何让导航栏始终如一地检测路线何时更改？谢谢！

导航栏.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));

应用.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;

从package.json：

"dependencies": {
"@fortawesome/fontawesome-svg-core": "^1.2.18",
"@fortawesome/free-regular-svg-icons": "^5.8.2",
"@fortawesome/free-solid-svg-icons": "^5.8.2",
"@fortawesome/react-fontawesome": "^0.1.4",
"bootstrap": "^4.2.1",
"classnames": "^2.2.6",
"formik": "^1.5.7",
"i": "^0.3.6",
"jquery": "^3.4.0",
"jwt-decode": "^2.2.0",
"normalizr": "^3.3.0",
"npm": "^6.9.0",
"prop-types": "^15.7.2",
"react": "^16.8.2",
"react-dom": "^16.8.2",
"react-markdown": "^4.0.6",
"react-redux": "^6.0.0",
"react-router-dom": "^4.3.1",
"react-scripts": "3.0.0",
"react-widgets": "^4.4.11",
"reactstrap": "^7.1.0",
"redux": "^4.0.1",
"redux-devtools-extension": "^2.13.8",
"redux-thunk": "^2.3.0",
"reselect": "^4.0.0",
"updeep": "^1.1.0"
},

Answer 1

问题出在这一行：

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

您没有使用PureComponent，但 reduxconnect是。您可以通过以下方式解决此问题：

1.反转构图：

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

2.将位置道具传mapStateToProps：

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

Answer 2

将Switch从 react-router-dom 导入到您的应用程序.js

import { BrowserRouter as Router, Route, Switch } from 'react-router-dom'
const App = () => (
<Provider store={store}>
<Router>
<div>
<Navbar />
<div className="container">
<Switch>
<Route exact path="/" component={Home} />
<Route exact path="/account" component={Account} />
</Switch>
</div>
</div>
</Router>
</Provider>
);
export default App;

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