Question

用户登录时导航没有更新，我遇到了一个问题。

所以我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;

在我的Login.js文件中，调用我的API，检查有效的详细信息，如果它们有效，那么响应将设置一个令牌，并且将value过期的值存储到localStorage中，然后重定向到首页； / p>

.then((response) => {
    // Set token here
    // set expires at here

    // redirect to homepage after successful login
    this.props.history.push("/");

这一切都完美无瑕，但是在我的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;

我也尝试过使用componentWillMount方法。

以下是auth.isAuthenticated代码（已删除）

isAuthenticated () {
    if (this.isExpired()) {
        return false
    }

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

    return true
}

Answer 1

您需要为history添加道具Navigation：

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;

，然后在componentDidMount中添加this.props.history.push("/")：

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);

示例：

状态更改时，React组件不会更新

1 个答案: