Question

所以我有一个<NavBar/>组件，一个人登录后，我希望<NavBar/>的登录按钮更改为注销。

从某种意义上说，我拥有的“工作原理”是，当我手动刷新页面时，由于我具有catch_all路由，因此您将被转发到/，按钮确实需要更改才能退出。但是，当您进行典型的用户旅程并在/home之后转到/login时，按钮不会更新。

值得注意的是，相反的情况也是如此，就像我登录后刷新主页然后单击注销一样。直到我重新加载页面，更改才会生效。仅当我重新加载页面时，<NavBar/>按钮才会更新。

路线

const AppRouter = () => {
  const [user, setUser] = useState(null);
  const providerValue = useMemo(() => ({user, setUser}), [user, setUser]);
  const [loggedIn, setLoggedIn] = useState(
    JSON.parse(localStorage.getItem('user'))
  );
   
  return(
    <React.Fragment>
      <BrowserRouter>
        <UserContext.Provider value={providerValue}>
          <NavBar {...{loggedIn}}/>
          <Route exact path='/' component={LandingPage} />
          <Switch>
            <Route path="/login" component={LoginPage} />
              <PrivateRoute exact path="/home" component={(routeProps) =>
                <UserApp {...{setLoggedIn, ...routeProps}} />
              } />
          etc...

导航栏

const NavBar = (props) => {
  const {user, setUser} = useContext(UserContext);
  let history = useHistory();

  const handleClick = async(e) => {
    let data = await authService.logout_user();
    setUser(null);
    history.push('/');
  }

  return (
    <header>
      <div className={styles.menuContainer}>
        <h1 className={styles.logo}><Link to='/'>Bookshelf.</Link></h1>
        <nav>
          <ul>
          { props.loggedIn &&
            <li><a onClick={handleClick}>Logout</a></li> ||
            <li><Link to='/login'>Login</Link></li>    
          }
          </ul>
        </nav>
      </div>
    </header>
  );
}

我需要一种重新加载组件或页面的方法。但是，如果我手动重新加载页面，则页面404就像我正在使用带有Flask后端的browserRouter一样。我对React很新，所以任何建议都很棒。我认为useEffect()或history.something在这里很有用，但我不确定如何处理此问题。

谢谢！

使用React Hooks更改数据时更新组件

0 个答案: