I’m trying to pass several props in a private route. What’s the correct way to write this and what am I missing? Here is the code I have. My app works with this code, in that the user is able to login and see the dashboard. However, the props aren’t passing. Is there a way to pass props to a private route?
<PrivateRoute exact path="/dashboard" component={Dashboard} render={routeProps => <Dashboard handleUpdate={this.handleUpdate} book={this.state.book} info={this.state.info} {...routeProps} />} />
Dashboard Component
class Dashboard extends Component { state = { book: this.props.book, info: this.props.info, error: '', } onLogoutClick = e => { e.preventDefault(); this.props.logoutUser(); }; render() { console.log(`BOOK STATE IN DB: ${this.state.book}`) const { user } = this.props.auth; return( <div> <h4> <b>This is your page</b> {user.name} </h4> <button onClick={this.onLogoutClick}>Logout</button> <h2>Search Book</h2> <Search handleUpdate={this.props.handleUpdate} /> <h4>Book Results</h4> <div>{this.state.book}</div> </div> ); } } Dashboard.propTypes = { logoutUser: PropTypes.func.isRequired, auth: PropTypes.object.isRequired }; const mapStateToProps = state => ({ auth: state.auth }); export default connect( mapStateToProps, { logoutUser } )(Dashboard);
Private Route
import React from "react"; import { Route, Redirect } from "react-router-dom"; import { connect } from "react-redux"; import PropTypes from "prop-types"; const PrivateRoute = ({ component: Component, auth, ...rest }) => ( console.log(auth), <Route {...rest} render={props => auth.isAuthenticated === false ? ( <Redirect to="/login" /> ) : ( <Component {...props} /> ) } /> ); PrivateRoute.propTypes = { auth: PropTypes.object.isRequired }; const mapStateToProps = state => ({ auth: state.auth }); export default connect(mapStateToProps)(PrivateRoute);
Answer
const PrivateRoute = ({component: Component, auth, book, handleUpdate, ...rest }) => ( console.log(rest), console.log(book), <Route {...rest} render={props => auth.isAuthenticated === false ? ( <Redirect to="/login" /> ) : ( <Component book={book} handleUpdate={handleUpdate} {...props} /> )
} /> )