reactjs - 反应路由器链接不刷新页面

Question

早上好，我有一个带有导航栏的标题组件和其中一些来自反应路由器的链接，标题在我的应用程序组件中被调用，并且链接具有一些与身份验证相关的显示条件。问题是，当我单击标题上的任何链接时，页面会更改，但标题本身保持不变，例如登录，当我单击登录时注销登录组件应该被隐藏并显示注销组件，但它不起作用。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>
    );
  }
}

标签： reactjshyperlinkroutingroutesreact-router

Answer 1

您似乎没有调用AuthenticationService登录函数来将值传递给isUserLoggedIn道具。

AuthenticationService.isUserLoggedIn对比AuthenticationService.isUserLoggedIn()

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