当点击<link />时,react-router 4不会更新UI

时间:2017-06-29 11:14:37

标签: javascript reactjs react-router-v4

我正在使用导航栏和使用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>
    );
}

3 个答案:

答案 0 :(得分:8)

似乎有些组件,比如使用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

答案 1 :(得分:1)

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

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

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

即可

答案 2 :(得分:0)

埃里克温格几乎是对的。 据我了解您输入的组件,您需要使用withRouter包装Component。

所以,要解决此问题,您需要添加:

...
Main = withRouter(Main);
...
export default Main;
...