-
-
Save abohannon/cca2dd998edf9dc2c2165f538eece4b2 to your computer and use it in GitHub Desktop.
| import React from 'react'; | |
| import { Route, Redirect } from 'react-router-dom'; | |
| const PrivateRoute = ({ component: Component, authed, ...rest }) => ( | |
| <Route | |
| {...rest} | |
| render={props => ( | |
| authed | |
| ? <Component {...props} /> | |
| : <Redirect to="/login" /> | |
| )} | |
| /> | |
| ); | |
| export default PrivateRoute; |
| import React, { Component } from 'react'; | |
| import { connect } from 'react-redux'; | |
| import { BrowserRouter, Route } from 'react-router-dom'; | |
| import * as actions from '../actions'; | |
| import Dashboard from '../components/Dashboard'; | |
| import UserAuth from '../components/UserAuth'; | |
| import PrivateRoute from '../components/PrivateRoute'; | |
| class Routes extends Component { | |
| componentDidMount() { | |
| console.log('==== Routes mounted!'); | |
| } | |
| render() { | |
| console.log('Routes props', this.props.currentUser); | |
| return ( | |
| <BrowserRouter> | |
| <div> | |
| <Route exact path="/login" component={UserAuth} /> | |
| <Route exact path="/signup" component={UserAuth} /> | |
| <PrivateRoute exact path="/" component={Dashboard} authed={this.props.currentUser} /> | |
| </div> | |
| </BrowserRouter> | |
| ); | |
| } | |
| } | |
| const mapStateToProps = state => ({ currentUser: state.userAuth }); | |
| export default connect(mapStateToProps, actions)(Routes); |
Thanks, it works.
When i try to connect the state to props in PrivateRoute component it doesn't work. It seems wrapped component in connect prevent the PrivateRoute to rerender.
good!
@alfonmga I agree with you. In my own project, I direct read current user from store's redux state.
tks !
Hey Adam (@abohannon) thanks for sharing this.
I was asking myself if isn't better to getcurrentUserstate fromPrivateRoute.jsinstead of get it fromRoutes.jsso we don't have to pass it to all private routes. What do you think? I'm missing something? I'm new to Redux.
@alfonmga Whoa I had no idea people were finding this. Two years later, sorry!
So it's been a minute since I've used this pattern in redux and today I would likely use hooks or context, but glancing back over this, I think I added connect on Routes because I was treating Routes as a container and I typically only like to connect my containers to keep things organized. Sometimes I break that rule, but since currentUser here only has to go one level deep, I don't mind.
Stll can use this ?
I need to make route guard in my app too ?
Edit: i did try out and it was awesome :) :)
Hey Adam (@abohannon) thanks for sharing this.
I was asking myself if isn't better to get
currentUserstate fromPrivateRoute.jsinstead of get it fromRoutes.jsso we don't have to pass it to all private routes. What do you think? I'm missing something? I'm new to Redux.