React router render not getting props

React router render not getting props

My application requires users to authenticate before they can access specific routes. For this, I am trying to follow react-router's&nbsp;<a href="https://reacttraining.com/react-router/web/example/auth-workflow" target="_blank">auth-workflow example</a>.

My application requires users to authenticate before they can access specific routes. For this, I am trying to follow react-router's auth-workflow example.

routes/index.js

 // Private Route
 import PrivateRoute from "../containers/PrivateRoute";

export default ( <Switch> <Route path="/login" component={Login} exact={true}/> <Route path="/changePassword" component={ChangePassword} exact={true}/> <PrivateRoute path="/groups" component={ListGroups} exact={true}/> <Route path="/verify" component={VerificationCode} exact={true}/> <Route component={NoMatch}/> </Switch> );

containers/PrivateRoute

import { connect } from "react-redux";
import { bindActionCreators } from "redux";

import PrivateRoute from "../routes/PrivateRoute";

const mapStateToProps = (state) => { return { jwtTokens: state.auth.jwtTokens, email: state.auth.email, isAuthenticated: state.auth.isAuthenticated }; };

const mapDispatchToProps = (dispatch) => { return bindActionCreators({}, dispatch); };

export default connect( mapStateToProps, mapDispatchToProps )(PrivateRoute);

routes/PrivateRoute.js

export default function PrivateRoute({ component: Component, ...rest }) {
    return (
        <Route
            {...rest}
            render={(props) => {
                return (props.isAuthenticated) ? (
                    <Component {...props} />
                ) : (
                    <Redirect
                        to={{
                            pathname: "/login",
                            state: {
                                from: props.location
                            }
                        }}
                    />
                );
            }}
        />
    );
}

When debugging in Chrome DevTools, when entering the render function, I am not getting the full values as I am in rest. Screenshots below represent my debugging in Chrome and the values I can see at each stage:

In the image above, I can see the values; jwtTokens, isAuthenticated, and email. To my knowledge from following examples, using the spread operator on rest is how I pass the values to render as a param. The next screenshot shows this is not the case:

I am able to simply use the rest param to access the properties but shouldn't I be just as easily be able to access the same values from props as well?

reactjs

Bootstrap 5 Complete Course with Examples

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

Building a simple Applications with Vue 3

Deno Crash Course: Explore Deno and Create a full REST API with Deno

How to Build a Real-time Chat App with Deno and WebSockets

Convert HTML to Markdown Online

HTML entity encoder decoder Online

Why ReactJS is better for Web Application Development?

Web Application Development is the point of contact for a business in today's digital era. It is important to choose the right platform for Web Application Development to build a high end Web

ReactJs Course | How to build a YouTube Clone using ReactJS

Hello, this is a new tutorial series about ReactJs. In this series, I will teach you two important topics. First, I will be teaching you what is ReactJs library and why this is so powerful and expandable. We will see what are the important...

Top Reasons to Choose ReactJS for Front-End Development - Prismetric

Why ReactJS is perfect choice for your next web application? Get to know all about ReactJS development and its benefits in detail for frontend development.

Highcharts with Reactjs

#reactjs #highcharts #therichpost https://therichpost.com/highcharts-with-reactjs-working-tutorial/ Highcharts with Reactjs Please like, share and subscribe....

ReactJS Development Services | ReactJS Development Company - Chapter 247 Infotech

Chapter 247 Infotech is a leading ReactJS development company in India, USA, offering ReactJS development services at par to a spectrum of business domains from E-commerce, healthcare to Edutech at