我正在使用导航栏和使用react-router-dom 4.1.1
的5条路线编写一个小应用。当我单击导航栏中的链接时,Firefox地址栏中的URL会更新,但显示的页面不会更改。但是,如果我在地址栏中输入子页面的地址,则会显示正确的页面。
app.js:
render(
<Provider store={store}>
<HashRouter>
<MainContainer />
</HashRouter>
</Provider>,
document.querySelector('.app')
);
Main.js:
render() {
return (
<div className="main">
<Message message= {this.props.message} />
<NavigationBar />
<Switch>
<Route exact path="/" component={HomePage}></Route>
<Route path="/classify" component={ClassifyPage}></Route>
<Route path="/admin" component={AdminPage}></Route>
<Route path="/users" component={UsersPage}></Route>
<Route path="/help" component={HelpPage}></Route>
</Switch>
</div>
);
}
答案 0 :(得分:8)
似乎有些组件,比如使用connect()的react-redux容器,阻止更新。使用withRouter()来解决问题:
const MainContainer = withRouter(connect(
mapStateToProps,
mapDispatchToProps
)(Main));
答案 1 :(得分:1)
我有同样的错误,但是当我使用withRouter时,没有任何改变。就我而言,错误的原因是将<Link>
元素放入<Router>
标记中。
<Router>
<Link to="something"></Link>
</Router>
小心那个错误,很难诊断!要解决此问题,只需删除不必要的<Router>
包装器
答案 2 :(得分:0)
所以,要解决此问题,您需要添加:
...
Main = withRouter(Main);
...
export default Main;
...