I am using the ConnectedRouter component and a custom Route like so:
const PrivateRoute = ({ layout: Layout, component: Component, rest }) => (
<Route
{...rest}
render={matchProps => (
<AuthConsumer>
{({ authenticated }) =>
authenticated ? (
<Layout pathname={matchProps.location.pathname}>
<Component {...matchProps} />
</Layout>
) : (
<Redirect to={{ pathname: '/login', state: { from: matchProps.location } }} />
)
}
</AuthConsumer>
)}
/>
)
which I use like this:
<Switch>
<PrivateRoute
exact
path={`${match.url}someroute/:id`}
layout={Layout}
component={SomePage}
/>
</Switch>
And a component like so:
import React from 'react'
const SomePage = ({ match }) => {
console.log('MATCH ', match.params)
return <div>TESTING</div>
}
export default SomePage
In this case, match is empty, and it thinks its on the '/' route (even though location prop says its on /someroute/123.
On the other hand, this works:
<Route
exact
path={`${match.url}someroute/:id`}
component={SomePage}
/>
and match gets updated properly.
I'm stumped as to why this is happening. Any help would be appreciated!
Ah, I figure it out. rest should have been ...rest, the <Route> component wasn't getting the props passed down correctly!
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?
The render callback of a Route that you are using to render Component does not forward props received by the Route from outside. It only contains the location, match and params of the route. What you probably wanted to do is to spread rest into the <Component /> rather then the Route as a Route will not use any of those nor does it expect those props:
export default function PrivateRoute({ component: Component, ...rest }) {
return (
<Route
render={(props) => {
return (rest.isAuthenticated) ? (
<Component {...props} {...rest} /> {/* add rest here instead */}
) : (
<Redirect
to={{
pathname: "/login",
state: {
from: props.location
}
}}
/>
);
}}
/>
);
}
You also need to check rest.isAuthenticated instead of props.isAuthenticated for the same reason. isAuthenticated will not be in the props passed to the render callback.
Also see in the react-router docs about Route props about which props will be passed to the render callback:
Route props
All three render methods will be passed the same three route props
match
location
history
I am trying to create a protected route as shown in the code below:
const PrivateRoute = ({component:Component, authenticated, ...rest}) =>{
console.log(authenticated);
return(
<Route {...rest} render={(props) => (
authenticated === true
? <Component {...props} {...rest} />
: <Redirect to="/Login"/>
)} />);
}
export default PrivateRoute;
I am passing the following params in my Router configuration:
<PrivateRoute component={Appointments} authenticated={this.state.authenticated} exact path="/appointments" render={(props) => <Appointments {...props} appointments={this.state.appointments} />} />
.
However, when I try routing, it appears that the "appointments={this.state.appointments}" prop is not getting passed to the "Appointments" component.
This is the error that I get
TypeError: Cannot read property 'map' of undefined
Any idea what the issue could be?
I think the problem here is that you are passing props in the render property of the PrivateRoute which is as render={(props) => <Appointments {...props} appointments={this.state.appointments} />}. Now this property is not being Utilised in your actual component rendering in the PrivateRoute. Try following during your initialisation of route:
<PrivateRoute component={Appointments} authenticated={this.state.authenticated} exact path="/appointments" appointments={this.state.appointments} />
This should fix your issue. I would suggest here that rather than creating a PrivateRoute of your own, you can use a React HOC to create an authentication wrapper on the actual component.
function PrivateRoute({ children, ...rest }) {
const isAuthenticated = (location) => {
//if loading show loading indicator
}
const childrenWithLocation = (location) => Children.map(children, child => {
if (isValidElement(child)) {
return cloneElement(child, { to: child.props?.to + location.search });
}
return child;
});
return (
<Route
{...rest}
render={({ location }) =>
isAuthenticated(location)
? (childrenWithLocation(location))
: (<Redirect
to={{
pathname: "/login" + location.search,
state: { from: location }
}}
/>)
}
/>
);
}
I'm using react-router and I've created a PrivateRoute component that shows the component if authenticated, otherwise redirects to the login page.
What I want to do is pass an additional prop (authentication) on top of the ones specified by the caller.
I can't seem to get the syntax right, and googling for "...props" didn't bring up any documentation.
Here's my code:
const PrivateRoute = ({ component: Component, ...rest }) => (
<Route {...rest} render={(props) => (
this.state.authentication.authenticated() ? (
<Component authentication:{this.state.authentication} {...props}/>
) : (
<Redirect to={{
pathname: '/login',
state: { from: props.location }
}}/>
)
)}/>
);
Problem is with authentication prop syntax. Use = instead of :
<Component authentication={this.state.authentication} {...props}/>
That would be a prop just like any other:
<Component
authentication={this.state.authentication}
{...props}
/>
I find it helps to put them on separate lines to easily see what's happening.
Also, if {...props} already contains a key called authentication, then you can override it by putting it after:
const someProps = {
hello: 1
};
// this.props.hello will be 2
<Component
{...someProps}
hello={2}
/>
I have slightly adjusted the React Router example for the private routes to play nice with Redux, but no components are rendered when Linking or Redirecting to other 'pages'. The example can be found here:
https://reacttraining.com/react-router/web/example/auth-workflow
Their PrivateRoute component looks like this:
const PrivateRoute = ({ component: Component, ...rest }) => (
<Route {...rest} render={props => (
fakeAuth.isAuthenticated ? (
<Component {...props}/>
) : (
<Redirect to={{
pathname: '/login',
state: { from: props.location }
}}/>
)
)}/>
)
But, because I have incorporated it in a Redux application, I had to adjust the PrivateRoute a little so I can access the redux store, as well as the route Props:
const PrivateRouteComponent = (props) => (
<Route {...props.routeProps} render={() => (
props.logged_in ? (
<div>{props.children}</div>
) : (
<Redirect to={{
pathname: '/login',
state: { from: props.location }
}} /> )
)} />
);
const mapStateToProps = (state, ownProps) => {
return {
logged_in: state.auth.logged_in,
location: ownProps.path,
routeProps: {
exact: ownProps.exact,
path: ownProps.path
}
};
};
const PrivateRoute = connect(mapStateToProps, null)(PrivateRouteComponent);
export default PrivateRoute
Whenever I'm not logged in and hit a PrivateRoute, I'm correctly redirected to /login. However, after for instance logging in and using a <Redirect .../>, or clicking any <Link ...> to a PrivateRoute, the URI updates, but the view doesn't. It stays on the same component.
What am I doing wrong?
Just to complete the picture, in the app's index.js there is some irrelevant stuff, and the routes are set up like this:
ReactDOM.render(
<Provider store={store}>
<App>
<Router>
<div>
<PrivateRoute exact path="/"><Home /></PrivateRoute>
// ... other private routes
<Route path="/login" component={Login} />
</div>
</Router>
</App>
</Provider>,
document.getElementById('root')
);
You need to wrap your Route with <Switch> tag
ReactDOM.render(
<Provider store={store}>
<App>
<Router>
<div>
<Switch>
<PrivateRoute exact path="/"><Home /></PrivateRoute>
// ... other private routes
<Route path="/login" component={Login} />
</Switch>
</div>
</Router>
</App>
</Provider>,
document.getElementById('root'));
Set the private route to not be pure:
export default connect(mapStateToProps, null, null, {
pure: false,
})(PrivateRoute);
This will let the Component re-render.
Please see: react-router-4-x-privateroute-not-working-after-connecting-to-redux.
Just had same problem, I solved it by making my App redux container and passing isAuthenticated as a prop to PrivateRoute
Here it is, I hope it helps
const App = (props) => {
return (
<Provider store={store}>
<Router>
<div>
<PrivateRoute path="/secured" component={Secured} isAuthenticated={props.isAuthenticated} />
</div>
</Router>
</Provider>
);
};
const mapStateToProps = state => ({
isAuthenticated: state.isAuthenticated
});
export default connect(mapStateToProps)(App);
Then in my PrivateRoute
const PrivateRoute = ({ component: Component, isAuthenticated, ...rest}) => (
<Route
{...rest}
render={props => (
isAuthenticated
? (
<Component {...props} />
)
: (<Redirect to={{ pathname: '/login', state: { from: props.location} }} />)
)}
/>
);
export default PrivateRoute;
I managed to get this working using the rest parameter to access the data from mapStateToProps:
const PrivateRoute = ({component: Component, ...rest}) => {
const {isAuthenticated} = rest;
return (
<Route {...rest} render={props => (
isAuthenticated ? (
<Component {...props}/>
) : (
<Redirect to={{
pathname: '/login',
state: {from: props.location}
}}/>
)
)}
/>
);
};
PrivateRoute.propTypes = {
isAuthenticated: PropTypes.bool.isRequired,
};
function mapStateToProps(state) {
return {
isAuthenticated: state.user.isAuthenticated,
};
}
export default connect(mapStateToProps)(PrivateRoute);
Well, I think the answer to this question should really be more detailed, so here I am, after 4 hours of digging.
When you wrap your component with connect(), React Redux implements shouldComponentUpdate (sCU if you search answers on github issues) on it and do shallow comparison on props (it goes throug each key in the props object and check if values are identical with '==='). What it means in practice is that your component is considered Pure. It will now change only when its props change and only then! This is the key message here.
Second key message, React router works with context to pass the location, match and history objects from Router to Route component. It doesn't use props.
Now let's see in practice what happen, because even knowing that, I find it still pretty tricky:
Case 1:
There is 3 key to your props after connecting: path, component, and auth (given by connect). So, in fact, your wrapped component will NOT re-render at all on route changes because it doesn't care. When route changes, your props don't change and it will not update.
Case 3:
Now there is 4 keys to your props after connecting: path, component, auth and anyprop. The trick here is that anyprop is an object that is created each time the component is called. So whenever your component is called this comparison is made: {a:1} === {a:1}, which (you can try) gives you false, so your component now updates every single time. Note however that your component still doesn't care about the route, its children do.
Case 2:
Now that's the mystery here, because i guess you call this line in your App file, and there should be no reference to "auth" in there, and you should have an error (at least that's what i am guetting). My guess is that "auth" in your App file references an object defined there.
Now what should we do ?
I see two options here:
Tell React Redux that your component is not pure, this will remove the sCU injection and your component will now correctly update.
connect(mapStateToProps, null, null, {
pure: false
})(PrivateRoute)
Use WithRouter(), which will results in injecting the location, match and history object to your component as props. Now, I don't know the internals, but i suspect React router doesn't mutate those objects so each time the route change, its props change (sCU returns true) as well and your component correctly updates. The side effect of this is that your React tree is now polluted with a lot of WithRouter and Route stuff...
Reference to the github issue: Dealing with Update Blocking
You can see here that withRouter is intended as a quickfix but not a recommended solution. using pure:false is not mentionned so I don't know how good this fix could be.
I found a 3rd solution, though it's unclear to me if it is really a better solution than withRouter, using Higher Order Component. You connect your Higher-order Component to the Redux store, and now your route doesn't give a damn about what it renders, the HOC deals with it.
import Notlogged from "./Notlogged";
function Isloggedhoc({ wrap: Component, islogged, ...props }) {
return islogged ? <Component {...props} /> : <Notlogged {...props} />;
}
const mapState = (state, ownprops) => ({
islogged: state.logged,
...ownprops
});
export default connect(mapState)(Isloggedhoc);
in your App.js
<Route path="/PrivateRoute" render={props => <Isloadedhoc wrap={Mycomponent} />} />
You could even make a curried function to shorten it a bit:
function isLogged(component) {
return function(props) {
return <Isloadedhoc wrap={component} {...props} />;
};
}
Using it like that:
<Route path="/PrivateRoute" render={isLogged(Mycomponent)} />
I have struggled with this issue as well, and here is my solution.
Instead of passing isAuthenticated to every < PrivateRoute> component, you just need to get isAuthenticated from state in < PrivateRoute> itself.
import React from 'react';
import {Route, Redirect, withRouter} from 'react-router-dom';
import {connect} from 'react-redux';
// isAuthenticated is passed as prop here
const PrivateRoute = ({component: Component, isAuthenticated , ...rest}) => {
return <Route
{...rest}
render={
props => {
return isAuthenticated ?
(
<Component {...props} />
)
:
(
<Redirect
to={{
pathname: "/login",
state: {from: props.location}
}}
/>
)
}
}
/>
};
const mapStateToProps = state => (
{
// isAuthenticated value is get from here
isAuthenticated : state.auth.isAuthenticated
}
);
export default withRouter(connect(
mapStateToProps, null, null, {pure: false}
)(PrivateRoute));
Typescript
If you are looking for a solution for Typescript, then I made it work this way,
const PrivateRoute = ({ component: Component, ...rest }: any) => (
<Route
{...rest}
render={props =>
localStorage.getItem("authToken") ? (
<Component {...props} />
) : (
<Redirect
to={{
pathname: "/login",
state: { from: props.location }
}}
/>
)
}
/>
);
<Router>
<Switch>
<PrivateRoute exact path="/home" component={Home} />
<Route path="/login" component={Login} />
</Switch>
</Router>
Just in case you want to go by creating a class then something like this,
class PrivateRoute extends Route {
render() {
if (localStorage.getItem("authToken")) {
return <Route {...this.props} />
} else {
return <Redirect
to={{
pathname: "/login",
state: { from: this.props.location }
}}
/>
}
}
}
According to react-router documentation you may just wrap your connect function with withRouter:
// before
export default connect(mapStateToProps)(Something)
// after
import { withRouter } from 'react-router-dom'
export default withRouter(connect(mapStateToProps)(Something))
This worked for me and my views started to be updated along with routes in this case.
I have the similar issue like #Rein. In my case, PrivateRoute looks almost same to the original version but only connected to Redux and used it instead of fakeAuth in the original example.
const PrivateRoute = ({ component: Component, auth, ...rest }) => (
<Route
{...rest}
render={props =>
auth.isAuthenticated
? <Component {...props} />
: <Redirect to={{ pathname: "/login" }} />}
/>
);
PrivateRoute.propTypes = {
auth: PropTypes.object.isRequired,
component: PropTypes.func.isRequired
}
const mapStateToProps = (state, ownProps) => {
return {
auth: state.auth
}
};
export default connect(mapStateToProps)(PrivateRoute);
Usage and result:-
NOT working but expecting to work
<PrivateRoute path="/member" component={MemberPage} />
working but NOT desired to used like this
<PrivateRoute path="/member" component={MemberPage} auth={auth} />
working. JUST to work but NOT desired to used at all. An understanding from this point is that, if you connect original PrivateRoute to Redux, you need to pass some additional props (any prop)to make PrivateRoute working otherwise it does not work. Anyone, please give some hint on this behavior. This is my main concern. As a New Question at
<PrivateRoute path="/member" component={MemberPage} anyprop={{a:1}} />