我创建了一个带有标题和简单授权的简单 react.js,因此如果用户已登录(用户对象设置在 localstorage 中) - 导航栏显示,如果没有 - 导航栏隐藏。代码如下:
#App.js
import React from 'react';
import { connect } from 'react-redux';
import LoginPage from "./components/loginPage/loginPage";
import MainPage from "./components/dashboard/mainPage";
import AuditPage from "./components/auditPage/AuditPage.js";
import Navbar from "./components/navbar/Navbar";
import Test01 from "./components/dev/test01";
import Test02 from "./components/dev/test02";
import {Router, Route, BrowserRouter, Redirect, Switch} from 'react-router-dom';
import {history} from "./helpers/history";
import TestsNav from "./components/dev/TestsNav";
class App extends React.Component {
constructor(props){
super(props);
}
render() {
return (
<div className="main-container">
<Router history={history}>
{localStorage.getItem('user') && (//this fires only once, when the page is loaded
<Navbar history={history} />
)}
<Switch>
<Route exact path="/login" component={LoginPage}/>
<Route exact path="/" component={MainPage}/>
<Route exact path="/audit" component={AuditPage}/>
<Route exact path="/test01" component={Test01}/>
<Route exact path="/test02" component={Test02}/>
</Switch>
</Router>
</div>
)
}
}
function mapStateToProps(state) {
return {
};
}
const connectedApp = connect(mapStateToProps)(App);
export default connectedApp;
问题在于,当用户登录并将数据设置为 localstorage 时 - 导航栏不显示 - 类 App.js 不会重新呈现。我得到了导航栏的渲染条件 - 但它只在页面加载时触发一次。所以如果我想显示导航栏,我需要按 f5,然后它才会出现。任何解决方法的想法都会受到欢迎。谢谢你。