Not able to get the value after updating the state - reactjs

Question

I have an application which has 3 pages .home ,shop,about.I want to add authentication to only page ie shop. When the user want to go to the shop page he has to login then only the user will go the shop page. I am maintaining a global state which has intital value isLogin:False. I extracted this value through mapStatetoProps in my App.js where all my Routes are there.For /shop path i am using the value as ternary condition. Initially the value (isLogin) is false it will render the Login page upon clicking shop link. But after proper authentication i am unable to redirect to the shop page
//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);
//Navigation
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
}
}
Unable to redirect to the shop page even after proper authentication also

Answer 1

Change the route like this :
<Route path="/shop"
render={() =>(
this.props.isLogin ? <Shop/> : <Login/>
) }
/>
The props that are passed to the render prop in the Route components are route props, not the App component props (they don't contain isLogin)
https://reacttraining.com/react-router/web/api/Route/route-props