单击 <Link> 时，react-router 4 不会更新 UI

IT技术 javascript reactjs react-router-v4
2021-04-29 10:34:32

我正在编写一个带有导航栏和 5 条路线的小应用程序，使用react-router-dom 4.1.1. 当我点击导航栏中的链接时，Firefox 地址栏中的 URL 会更新，但显示的页面没有改变。但是，如果我在地址栏中输入子页面的地址，则会显示正确的页面。

应用程序.js：

render(
    <Provider store={store}>
        <HashRouter>
            <MainContainer />
        </HashRouter>
    </Provider>,
    document.querySelector('.app')
);

主要.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>
    );
}
3个回答

似乎某些组件（例如使用 connect() 的 react-redux 容器）会阻止更新。使用 withRouter() 解决了问题：

const MainContainer = withRouter(connect(
        mapStateToProps,
        mapDispatchToProps
      )(Main));

文档：https : //github.com/ReactTraining/react-router/blob/master/packages/react-router/docs/api/withRouter.md

我有同样的错误，但是当我使用 withRouter 时，没有任何变化。就我而言，错误的原因是将<Link>元素放入<Router>标签中。

<Router>
<Link to="something"></Link>
</Router>

当心那个错误，很难诊断！要解决此问题，只需删除不必要的<Router>包装器

Erik Winge 几乎是对的。据我了解，您输入的组件需要使用 withRouter 包装您的组件。

因此，要解决此问题，您需要添加：

...
Main = withRouter(Main);
...
export default Main;
...
其它你可能感兴趣的问题
上一篇react 组件中的 render() 函数的作用是什么？ 下一篇如何使用功能组件和 React Router v5 在 React SPA 中拦截后退按钮