Question

我在Navbar组件中有以下代码：

renderAccountButton = user => {
  const path = this.props.location.pathname;
  const regex = new RegExp(/^\/register/);
  if (user.isAuthenticated) {
    return (
      <Button color="inherit" onClick={this.handleLogoutClick}>
        Logout
      </Button>
    );
  } else {
    return (
      <div>
        {!regex.test(path) && path !== "/" ? (
          <Button color="inherit" onClick={this.handleSignUpClick}>
            Sign Up
          </Button>
        ) : null}
        <Button color="inherit" onClick={this.handleLoginClick}>
          Login
        </Button>
      </div>
    );
  }
};

问题在于有时更改路径时不会触发更新。我有以下代码进行检查：

  componentDidMount() {
    console.log("mount");
  }

  componentDidUpdate() {
    console.log("update");
  }

似乎，每当我单击使用this.props.history.push("/newpath")的按钮或链接时，它都不会触发更新（以上内容均未记录到控制台）。因此，例如，如果我位于“ / register / user-type”路径中，然后单击一个链接以将我带到登录页面，则单击“注册”按钮（该按钮消失了，因为我位于“ //注册/任何内容”路径）不会呈现，因为该组件未检测到任何更改/更新。

此代码所在的Navbar组件包装在withRouter()包装器中，其父组件是我的App组件，其中包含实际的Router。有什么想法为什么会这样？是否可以传递给Navbar组件以触发更新？

谢谢。

修改

这是我的路由器代码，其中包含以下组件：

import { BrowserRouter as Router, Route, Switch } from "react-router-dom";
...rest of imports...

class App extends Component {
  constructor() {
    super();
    this.state = {
      navOpen: false
    };
  }

  toggleDrawer = () => {
    this.setState({
      navOpen: !this.state.navOpen
    });
  };

  handleLinkClick = () => {
    this.setState({ navOpen: false });
  };

  render() {
    const { classes } = this.props;
    return (
      <Provider store={store}>
        <MuiThemeProvider theme={theme}>
          <Router>
            <div className={classes.app}>
              <Navbar
                toggleDrawer={this.toggleDrawer}
                navOpen={this.state.navOpen}
                handleLinkClick={this.handleLinkClick}
              />
...rest of App...

这是我包裹导航栏的地方：

export default connect(
  mapStateToProps,
  { logoutUser, clearCurrentProfile }
)(withRouter(withStyles(styles)(Navbar)));

编辑2

我可能已经找到解决方案。通过将connect()包装器（来自react-redux）包装在withRouter()包装器中，似乎可以解决此问题。在运行更多测试之后，我将其添加为答案。但是，我对connect()包装器导致来自withRouter()包装器的更新无效的原因感到好奇，因此，我们将不胜感激。作为参考，上面的最后一个代码块如下所示：

export default withRouter(connect(
  mapStateToProps,
  { logoutUser, clearCurrentProfile }
)(withStyles(styles)(Navbar)));

Answer 1

如我的问题中所述，我能够通过将整个组件（包括redux connect()包装器）包装在withRouter()包装器中来解决此问题。不知道为什么这可以解决问题，但现在似乎已解决。以下是修改前后。

之前：

export default connect(
  mapStateToProps,
  { logoutUser, clearCurrentProfile }
)(withRouter(withStyles(styles)(Navbar)));

之后：

export default withRouter(connect(
  mapStateToProps,
  { logoutUser, clearCurrentProfile }
)(withStyles(styles)(Navbar)));

反应路由器位置不触发更新

1 个答案: