Реагировать на местоположение маршрутизатора, не вызывая обновления - PullRequest
Новая
       5

Реагировать на местоположение маршрутизатора, не вызывая обновления

0 голосов
/ 24 сентября 2018

У меня есть следующий код внутри компонента 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который содержит фактический маршрутизатор.Есть идеи, почему это происходит?И есть ли что-то, что я мог бы передать компоненту 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...

Вот где я завернул свой Navbar: 

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

Редактировать 2

У меня может бытьнашел решение.Обертка connect() (отact-redux) в оболочку withRouter(), похоже, решает проблему.Я добавлю это как ответ после того, как я выполню еще несколько тестов.Мне, однако, любопытно, что заставляет оболочку connect() отменять обновления из оболочки withRouter(), поэтому любые дальнейшие входные данные будут высоко оценены.Для справки, последний блок кода выше теперь выглядит так: 

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

1 Ответ

0 голосов
/ 26 сентября 2018

Как уже упоминалось в моем вопросе, я смог решить эту проблему, поместив весь компонент, включая оболочку redux connect(), в оболочку withRouter().Не знаю, почему это решает проблему, но, похоже, сейчас она решена.Ниже приведены правки до и после.

До: 

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

После: 

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