React Router Link не обновляет страницу - PullRequest
Новая
       69

React Router Link не обновляет страницу

0 голосов
/ 14 апреля 2020

Доброе утро, у меня есть компонент заголовка с навигационной панелью и некоторыми ссылками от реагирующего маршрутизатора, заголовок вызывается в моем компоненте приложения, и ссылки имеют некоторые условия отображения относительно аутентификации. Проблема в том, что когда я нажимаю на любую ссылку в заголовке, страница изменяется, но сам заголовок остается прежним, например, вход в систему, выход из системы, когда я нажимаю на компонент входа в систему, должен быть скрыт, а компонент выхода из системы отображается, но он не работает. Ps: когда меняюсь с Все отлично работает 

function TodoApp() {
//   let isUserLoggedIn = AuthenticationService.isUserLoggedIn();
//   console.log(isUserLoggedIn);
  //   render() {
  return (
    <div className="TodoApp">
     { <Router>
        <div>
          <HeaderComponent isUserLoggedIn={AuthenticationService.isUserLoggedIn} />
          <Switch>
            <Route path="/" exact component={withRouter(LoginComponent)} />
            <Route path="/login" component={withRouter(LoginComponent)} />
            <AuthenticatedRoute
              path="/welcome/:name"
              component={withRouter(WelcomeComponent)}
            />
            <AuthenticatedRoute
              path="/todos"
              component={withRouter(ListTodosComponent)}
            />
            <AuthenticatedRoute
              path="/logout"
              component={withRouter(LogoutComponent)}
            />
            <Route component={withRouter(ErrorComponent)} />
          </Switch>
          <FooterComponent />
        </div>
     </Router>
      {/* <LoginComponent /> */}
    </div>
  );
  }
}

class HeaderComponent extends Component {
  // constructor(props) {
  //   super(props);
  //   this.state = {
  //     isUserLoggedIn: AuthenticationSevice.isUserLoggedIn(),
  //   };
  //   //  this.handleState = this.handleState.bind(this);
  // }

  componentDidMount() {
    console.log("Header charged");
  }

  //   handleState = () => {
  //     this.setState(() => {
  //         return { isUserLoggedIn: AuthenticationSevice.isUserLoggedIn() };
  //       });
  //       console.log(this.state.isUserLoggedIn);
  //   }

  render() {
    // const isUserLoggedIn = AuthenticationSevice.isUserLoggedIn();
    return (
      <header>
        <nav className="navbar navbar-expand-md navbar-dark bg-dark">
          <div>
            <a className="navbar-brand" href="https://github.com/sbouhaddi">
              Sbouhaddi
            </a>
          </div>
          <ul className="navbar-nav">
            {this.props.isUserLoggedIn && (
              <li>
                <Link className="nav-link" to="/welcome/Sbouhaddi">
                  Home
                </Link>
              </li>
            )}
            {this.props.isUserLoggedIn && (
              <li>
                <Link className="nav-link" to="/todos">
                  Todos
                </Link>
              </li>
            )}
          </ul>
          <ul className="navbar-nav navbar-collapse justify-content-end">
            {!this.props.isUserLoggedIn && (
              <li>
                <Link className="nav-link" to="/login">
                  Login
                </Link>
              </li>
            )}
            {this.props.isUserLoggedIn && (
              <li>
                <Link
                  className="nav-link"
                  onClick={AuthenticationSevice.logout}
                  to="/logout"
                >
                  Logout
                </Link>
              </li>
            )}
          </ul>
        </nav>
      </header>
    );
  }
}

1 Ответ

0 голосов
/ 15 апреля 2020

Не отображается, вы вызываете свою AuthenticationService зарегистрированную функцию для передачи значения в isUserLoggedIn prop.

AuthenticationService.isUserLoggedIn vs AuthenticationService.isUserLoggedIn()

<HeaderComponent isUserLoggedIn={AuthenticationService.isUserLoggedIn()} />
...