Question

我只使用带有React-Router的香草React。

我当前的问题是我试图检测页面上的用户是否具有令牌，以指示该用户是否已登录。

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

问题是，我的链接不会在导航栏中动态更新，但是当使用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;

Answer 1

仅当状态或道具已更新时，组件才会重新呈现（刷新而不刷新浏览器）。目前，您似乎都没有。您很可能也需要从导航栏外部（您的应用程序中要测试用户是否已登录的其他任何部分）中获取此cookie-因此，我将其移至父组件，然后在调用Navbar时实例化例如：

<Navbar cookie={ userCookie: theUserCookie } />

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

反应路由-导航栏不更新，页面刷新

1 个答案: