Javascript 当状态更改时，反应组件不更新

当用户登录时，我的导航没有更新，这是一个问题

所以我的

App.js

的一部分看起来是这样的

import React from "react";
import { BrowserRouter as Router, Route } from "react-router-dom";

import Home from './views/Home';
import Login from './views/Login';
import Navigation from './components/Navigation';

function App() {
    return (
        <Router>
            <React.Fragment>

                <header className="header-global">
                    <Navigation />
                </header>

                <Route path="/" exact component={Home} />
                <Route path="/login" component={Login} />

                <Footer />

            </React.Fragment>
        </Router>
    );
}

export default App;

这一切都是完美无瑕的，但在我的

Navigation.js

文件中，我想将链接从

Login

更改为

Logout

，但重定向后它不会自动执行此操作。。我必须重新加载页面才能看到登录更改为注销

我有一个名为

auth.js

的单独文件，它有一个名为

isAuthenticated

的函数，这基本上只是检查令牌是否存在且有效，并基于此返回true或false

这是我的

Navigation.js

文件（我已将其压缩为仅显示所需内容），但我看不出有任何问题，我无法理解为什么它在重定向后不自动更改值

import React, { Component } from 'react';
import auth from '../auth';

class Navigation extends Component {
    constructor(props) {
        super(props);

        this.state = {
            isAuthenticated: false,
        };
    }

    componentDidMount() {
        if ( auth.isAuthenticated() ) {
            this.setState({ isAuthenticated: true })
        }
    }

    render() {
        const { isAuthenticated } = this.state;

        return (
            { isAuthenticated ? 'Logout' : 'Login' }
        );
    }
}

export default Navigation;

我也尝试过使用

组件willmount

方法

以下是auth.isAuthenticated代码（截图）

---

您需要为

导航添加道具
历史
：

import React from "react";
import { BrowserRouter as Router, Route } from "react-router-dom";

import Home from './views/Home';
import Login from './views/Login';
import Navigation from './components/Navigation';

function App() {
    return (
        <Router>
            <React.Fragment>

                <header className="header-global">
                    <Navigation />
                </header>

                <Route path="/" exact component={Home} />
                <Route path="/login" component={Login} />

                <Footer />

            </React.Fragment>
        </Router>
    );
}

export default App;

示例：

什么是
auth
componentDidMount
只会在加载组件时触发一次，如果您想让它成为一个动态值，则需要状态来保存令牌，并在每次令牌更改时运行一些逻辑，而不使用
componentDidUpdate（）
检查值是否更改，然后重新提交组件。添加您回答的
auth
code。您是否尝试过此
{auth.isAuthenticated（）？“注销”：“登录”}
。如果这样做有效，那么您就不需要state和componentDidMount。我不断得到一个
TypeError:cannotreadprops属性的未定义的
错误
isAuthenticated () {
    if (this.isExpired()) {
        return false
    }

    if (!this.getToken()) {
        return false
    }

    return true
}

import React from "react";
import { BrowserRouter as Router, Route } from "react-router-dom";

import Home from './views/Home';
import Login from './views/Login';
import Navigation from './components/Navigation';

function App() {
    return (
        <Router>
            <React.Fragment>

                <header className="header-global">
                    <Navigation />
                </header>

                <Route path="/" exact component={Home} />
                <Route path="/login" component={Login} />

                <Footer />

            </React.Fragment>
        </Router>
    );
}

export default App;

import React, { PureComponent } from 'react';
import auth from '../auth';

class Navigation extends PureComponent {
    constructor(props) {
        super(props);

        this.state = {
            isAuthenticated: false,
        };
    }

    componentDidMount() {
        if ( auth.isAuthenticated() ) {
            this.setState({ isAuthenticated: true });
            this.props.history.push("/");
        }
    }

    render() {
        const { isAuthenticated } = this.state;

        return (
            { isAuthenticated ? 'Logout' : 'Login' }
        );
    }
}

export default withRouter(Navigation);