快来加入我们吧！《小河山菜鸟》为前端开发者提供技术资料和系列基础文章。为了更好的用户体验，请移步我们的官网小河山菜鸟（https://xhs-rookies.com/）学习，及时获取最新文章。“代码裁缝”，如果您对我们的文章感兴趣，或者想提点建议，请关注“小河山菜鸟”微信公众号，与我们取得联系，您也可以在微信上观看我们的文章。每一个建议或认可，都是对我们莫大的鼓励！实践案例（四）：完善留言板登录这次我们学到了一些新的内容，需要对之前的版本进行修改。首先，我们需要一个登录页面，并通过HOC（HigherOrderComponent）添加认证功能。添加路由跳转以改善页面。添加路由yarn添加react-router-dom。我们先添加react-router来修改路由配置。我们需要修改index.js。之前的index.js只有App.js。我们在index.js中添加路由配置。ReactDOM.render(,document.getElementById('root'),)默认情况下，我们让页面指向登录页面。登录页面登录状态维护如果我们登录成功，我们应该有一个地方存放登录是否成功的信息，为后续的认证做准备，我们使用localstorage进行数据持久化处理。this.props.history.replace('/home')window.localStorage.islogin='1'认证跳转我们需要在登录页面进行认证，加载完成我们让登录页面判断，如果已经登录in，然后我们跳转到首页，这里我们使用react组件生命周期中的componentDidMount()方法来判断是否加载完成。componentDidMount(){letlocalStorage=window.localStorageif(localStorage.islogin==='1'){this.props.history.replace("/home")}}最终组合classLoginextendsPureComponent{componentDidMount(){letlocalStorage=window.localStorageif(localStorage.islogin==='1'){this.props.history.replace('/home')}}constructor(props){super(props)this.state={username:'',password:'',}}render(){return(欢迎来到XXX博客区
用户名：{this.setState({用户名:e.target.value})}}/>
