Props not pass in the route though pass it in the render

I am trying to pass the props in the route component, I know we cannot directly pass to that, so I used to render, but the props are still undefined in the child component.

import React from 'react';  //components  import Register from '../components/register/register';  import Login from "../components/login/login";  import  ForgetPassword from '../components/forget-password/forget-password';  //redux  import {store} from "../redux/store";  import { connect } from 'react-redux';  import actions from "../redux/authentication/actions";  //react-router  import {BrowserRouter,Route,Switch} from "react-router-dom";  //antd  import "antd/dist/antd.css";  //css  import '../global/_global.scss';    function Authentication(props) {    console.log("PROPS", props)    return (      <div className="App">      <BrowserRouter>        {/*switch-component will render first that matches the includes path*/}        <Switch>          <Route  path='/login' component={Login} />          <Route  exact  path='/' component={Login}  />          <Route   path='/register'            render={(props) => (                <Register {...props} check={props.registerUser}  />            )}                     />          <Route   path='/forget-password' component={ForgetPassword} />        </Switch>      </BrowserRouter>      </div>    );  }  function mapStateToProps(state){    return state.reducers;  }  export default connect(mapStateToProps, actions)(Authentication);  

https://stackoverflow.com/questions/67327304/props-not-pass-in-the-route-though-pass-it-in-the-render April 30, 2021 at 10:07AM