React Routing - 导航栏不更新，页面刷新更新答案

【问题标题】：React Routing - Navbar doesn't update, updates with page refreshReact Routing - 导航栏不更新，页面刷新更新
【发布时间】：2019-07-25 13:50:34
【问题描述】：

我只使用带有 React-Router 的 vanilla React。

我现在的问题是我在尝试检测页面上的用户是否有token，表明他是否登录。

在为 Login/Register/Logout 编写路由时，我尝试指定它们应该根据您是否登录来显示（如果已登录，则仅显示注销，否则同时显示注册/登录）。

问题是，我的导航栏中的链接没有动态更新，但是当使用 F5 或 CTRL+F5 刷新浏览器时，它可以正常工作。你能帮我吗？我尝试在 StackOverflow 上寻找其他解决方案，但没有一个对我有用（使用 componentDidUpdate 等）

import React from "react";
import { Route, Link, Switch, Redirect } from "react-router-dom";

import Cookies from "universal-cookie";

const cookies = new Cookies();

function handleClick(e) {
  cookies.remove("token");
}

class LoginButton extends React.Component {
  render() {
    return (
      <ul>
        <Link to="/login" onClick={handleClick}>
          Login
        </Link>
        <br />
        <Link to="/register">Register</Link>
      </ul>
    );
  }
}

class LogoutButton extends React.Component {
  render() {
    return (
      <ul>
        <Link to="/login" onClick={handleClick}>
          Logout
        </Link>
      </ul>
    );
  }
}

class NavBar extends React.Component {
  constructor(props) {
    super(props);
  }

  componentWillReceiveProps() {
    this.render();
  }

  render() {
    let token = cookies.get("token");
    let logButton;

    if (token === undefined) {
      logButton = <LoginButton />;
    } else {
      logButton = (
        <li>
          <LogoutButton />
        </li>
      );
    }
    return (
      <div>
        <ul>{logButton}</ul>
      </div>
    );
  }
}

export default NavBar;

【问题讨论】：

请通过codesandbox.io提供一个工作示例

标签： javascript reactjs express

【解决方案1】：

只有在状态或道具已更新时，组件才会重新渲染（刷新而不刷新浏览器）。目前，您似乎两者都没有。您很可能还需要来自导航栏外部的这些 cookie（应用程序中您想要测试用户是否登录的任何其他部分） - 所以我会将其移动到父组件，然后在调用导航栏时，实例化比如：

<Navbar cookie={ userCookie: theUserCookie } />

理想情况下，IMO 之类的用户 cookie 最好存储在 redux 状态 - 然后当另一个组件更新 cookie 时，引用 redux 存储的导航栏也会更新。

【讨论】：