在 URL 重定向时，React 组件总是回到初始状态

Question

我是新来的反应和创建一个简单的登录功能，遇到了一个问题。我在 NavBar 中放了一个登录/注册/退出按钮，我打算在 App 组件的状态下控制登录状态（最初是为了测试目的而设置的）。

class App extends React.Component {
  constructor() {
    super();
    this.state = {
      isLoggedIn: true,
    };
  }

  onSignOut = () => {
    this.setState({ isLoggedIn: false });
  };

  render() {
    const { posts, isLoggedIn } = this.state;
    console.log(1);
    return (
      <Router>
        **<NavBar isLoggedIn={isLoggedIn} onSignOut={this.onSignOut} />**
        <Switch>
          <Route path="/" exact component={Home}></Route>
          <Route path="/about"></Route>
          <Route path="/forum">
            <Forum posts={posts} />
          </Route>
          <Route path="/login"></Route>
          <Route path="/register">
            <Register />
          </Route>
          <Route path="/signin">
            <Signin />
          </Route>
        </Switch>
      </Router>
    );
  }
}

但是当我使用在 NavBar 中调用 this.setState 的 onSignOut 函数更新状态时，isLoggedIn 变为 false，但如果返回主页或任何其他页面，isLoggedIn 将变为 true。我认为这是因为当我转到另一个页面时 App 组件会重新呈现。有没有办法保持 isLoggedIn 不变，除非它从 this.setState 改变？

const NavBar = ({ isLoggedIn, onSignOut }) => {
  const loginControl = !isLoggedIn ? (
    <>
      <a className="link dim gray f6 f5-ns dib mr3" href="/signin">
        Sign In
      </a>
      <a className="link dim gray f6 f5-ns dib mr3" href="/register">
        Register
      </a>{" "}
    </>
  ) : (
    **<p className="link dim gray f6 f5-ns dib" onClick={onSignOut}>
      Sign Out
    </p>**
  );
  return (
    <nav className="pa3 pa4-ns ttu">
      <a className="link dim black b f6 f5-ns dib mr3" href="/">
        Site Name
      </a>
      <a className="link dim gray f6 f5-ns dib mr3" href="/">
        Home
      </a>
      <a className="link dim gray f6 f5-ns dib mr3" href="/forum" title="Forum">
        Forum
      </a>
      {loginControl}
    </nav>
  );
};

Answer 1

假设您使用的是react-router-dom，请使用Link 或NavLink 和to 属性在您的应用中推送到新路由。当您使用锚标记时，它是浏览器导航，而不是应用内导航，应用会重新加载。

const NavBar = ({ isLoggedIn, onSignOut }) => {
  const loginControl = !isLoggedIn ? (
    <>
      <Link className="link dim gray f6 f5-ns dib mr3" to="/signin">
        Sign In
      </Link>
      <Link className="link dim gray f6 f5-ns dib mr3" to="/register">
        Register
      </Link>{" "}
    </>
  ) : (
    **<p className="link dim gray f6 f5-ns dib" onClick={onSignOut}>
      Sign Out
    </p>**
  );
  return (
    <nav className="pa3 pa4-ns ttu">
      <Link className="link dim black b f6 f5-ns dib mr3" to="/">
        Site Name
      </Link>
      <Link className="link dim gray f6 f5-ns dib mr3" to="/">
        Home
      </Link>
      <Link className="link dim gray f6 f5-ns dib mr3" to="/forum" title="Forum">
        Forum
      </Link>
      {loginControl}
    </nav>
  );
};

注意：如果您正在使用其他导航包，请使用该包中提供的相应版本的Link。