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

我在导航栏组件中有以下代码：

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>
    );
  }
};

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...

似乎每当我单击使用

this.props.history.push（“/newpath”）

的按钮或链接时，它都不会触发更新（上面的任何内容都不会记录到控制台）。例如，如果我处于“/register/user type”路径，然后我单击一个链接将我带到登录页面，则注册按钮（由于我处于“/register/anything”路径而消失）不会呈现，因为组件未检测到任何更改/更新

此代码所在的导航栏组件包装在

withRouter（）

包装器中，其父组件是包含实际路由器的my App组件。你知道为什么会这样吗？有什么东西可以传递给导航栏组件来触发更新吗

提前谢谢

编辑

以下是我的路由器代码，包括组件：

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>
    );
  }
};

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...

编辑2

我可能已经找到了解决办法。通过将

connect（）

包装器（来自react redux）包装在

withRouter（）

包装器中，它似乎解决了这个问题。在我运行一些测试之后，我将添加这个作为答案。然而，我很好奇是什么原因导致

connect（）

包装器否定来自

withRouter（）的更新，因此任何进一步的输入都将不胜感激。作为参考，上面最后一段代码如下所示：

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

正如我在问题中提到的，我能够通过在
withRouter（）
包装中包装整个组件来解决问题，包括redux
connect（）
包装。不知道为什么这会解决问题，但现在似乎已经解决了。下面是编辑前后的内容

之前：

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

之后：

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

添加router.js code你把
检查放在哪里了
代码？如果你指的是我的
console.log（“匹配”）
和
console.log（“更新”）
检查，它们就在
render（）
函数的正上方。