Question

我有一个应用程序，它具有3页.home，shop.about。我只想向页面（即shop）添加身份验证。当用户想要进入商店页面时，他必须登录，然后只有用户将进入商店页面。我正在维护一个全局状态，其初始值为isLogin：False。我通过我的App.js中的mapStatetoProps提取了这个值，在那里我所有的路线都在其中。对于/ shop路径，我正在使用该值作为三元条件。最初，值（isLogin）为false，它将在单击shop链接时呈现Login页面。但是经过正确的身份验证后，我无法重定向到商店页面

// App.js

import React ,{Component} from 'react';
import './App.css';
import Navigation from './Step1/Navbar' 
import Home from './Step1/Home'
import Shop from './Step1/Shop'
import About from './Step1/About'
import Login from './LoginAuthentication/Loginform'
import {BrowserRouter as Router,Route} from 'react-router-dom'
import {connect} from 'react-redux'

const mapStateToProps=(state)=>{
  console.log(state)
  return{
     isLogin:state.isLogin
  }
}

class  App extends Component {
  render(){
  return (
    <Router>
    <div className="App">
      <Navigation/>
      <Route path="/" exact component={Home}/>
      <Route path="/about" component={About}/>
      <Route path="/shop"
       render={({isLogin}) =>(
            isLogin ? <Shop/> : <Login/>
        ) }

      />
    </div>
    </Router>
  );
}
}
export default connect(mapStateToProps,null)(App);

//导航

import React from 'react'
import {NavLink} from 'react-router-dom'
const Navbar=()=> {
    return (
        <div>

         <nav className="navbar navbar-expand-sm bg-dark">
         <ul className="navbar-nav">
          <li className="nav-item"><NavLink to="/" >Home</NavLink> </li>
          <li className="nav-item"><NavLink to="/shop">Shop </NavLink>  </li>
          <li className="nav-item"><NavLink to ="/About">About </NavLink>  </li>
          <li className="nav-item"><NavLink to ="/page">Page </NavLink>  </li>
         </ul>
</nav>
</div>
    )
}

export default Navbar

// LoginForm.js

import React, { Component } from 'react'
import {connect} from 'react-redux'
import {withRouter} from 'react-router-dom'
//import {Redirect} from 'react-router-dom'
import {action1} from '../Actions/action1'

const mapDispatchToProps=(dispatch)=>{
    return{
        LoginCheck:()=>dispatch(action1())
  }
}


 class Loginform extends Component {
    state={
        username:'',
        password:'',
        uname:'dharmendra',
        pwd:'230498'
    }


    nameHandler=(event)=>{
       if(event.target.name==='UserName'){
           this.setState({username:event.target.value})
       }
        if(event.target.name==='Password'){
            this.setState({password:event.target.value})
        }
    }

    submitHandler=(event,state)=>{
        event.preventDefault()
        const uname=this.state.uname
        const pwd=this.state.pwd
        if(this.state.username===uname && this.state.password===pwd){
              this.props.LoginCheck()
              //return <Redirect to="/shop"/>
               //this.props.history.push("/shop")
               this.props.history.push("/page");
               console.log('hi i am in shop page successful')
        }
        else{
            alert("Enter proper Credentials")
        }
    }

    render() {
        return (
            <div className="login">
                <form onSubmit={this.submitHandler}>
                    <div className="form-group">
                        <h1>
                        <input
                        type="text"
                        placeholder="UserName"
                        value={this.state.username}
                        onChange={this.nameHandler}
                        className="form-control"
                        name="UserName"
                        />
                        </h1>
                        </div>
                     <br></br> 
                    <div className="form-group">
                    <h1>
                     <input 
                       type="password"
                       placeholder="Password"
                       value={this.state.password}
                       onChange={this.nameHandler}
                       className="form-control"
                       name="Password"
                       />
                       </h1>
                      </div>

                      <br></br> 
                      <div className="form-group">
                       <button type="submit" className="btn btn-success" >Login</button>
                       </div>


                </form>
            </div>
        )
    }
}

export default withRouter(connect(null,mapDispatchToProps)(Loginform))

// reducer1.js

import {LOGINCHECK} from '../Constants/actiontypes'
const initialState={
   isLogin:false
}
const reducer1=(state=initialState,action)=>{
   //console.log(action.type)
   //console.log(state)
   if(action.type===LOGINCHECK){
      return Object.assign({},state,{isLogin:true})
   }
   return state
}

export default reducer1

// action.js

import {LOGINCHECK} from '../Constants/actiontypes'

export const action1  =()=>{

  return{
      type:LOGINCHECK

  }
}

即使经过正确的身份验证，也无法重定向到商店页面

Answer 1

像这样更改路线：

  <Route path="/shop"
   render={() =>(
        this.props.isLogin ? <Shop/> : <Login/>
    ) }

  />

在Route组件中传递给渲染道具的道具是路线道具，而不是App组件道具（它们不包含isLogin）

https://reacttraining.com/react-router/web/api/Route/route-props

更新状态后无法获取值

1 个答案: