Is it possible in React to conditionally render a inside a using this kind of component?
import PropTypes from 'prop-types'
import { useApplication } from 'ice-components'
const canEdit = (currentUser) => {
if (currentUser.settings.canEditSpecRec.value === 'False' || !currentUser.location.isSpecimenReceptionType) {
return false
}
return true
}
const Permissions = ({ children }) => {
const { currentUser } = useApplication()
if (!canEdit(currentUser)) {
return null
}
return children
}
Permissions.propTypes = {
children: PropTypes.node,
}
export { Permissions as default, canEdit }
And the route is made in this way:
<Switch>
<Route exact path component={component_1} />
<Route path='/anotherPath' component={component_2} />
<Switch>
I tried to wrap the Permissions component around a single Route component but it breaks. Any ideas?
A good way to conditionally render a Route is the one provided by the section Auth of the react-router documentation:
https://reacttraining.com/react-router/web/example/auth-workflow
What's different in your application is that you're not authorizing based on authentication but on some user permission, you could do something like this:
function PrivateRoute({ children, ...rest }) {
return (
<Route
{...rest}
render={({ location }) =>
canEdit(currentUser) ? (
children
) : (
<Redirect
to={{
pathname: "/",
}}
/>
)
}
/>
);
}
Wrapping the Route in a PrivateRoute component that will return your route if user has permission to or something else if not (maybe a redirect).
export default function AuthExample() {
return (
<Router>
<div>
<Switch>
<Route path="/public">
<PublicPage />
</Route>
<Route path="/login">
<LoginPage />
</Route>
<PrivateRoute path="/protected">
<ProtectedPage />
</PrivateRoute>
</Switch>
</div>
</Router>
);
}
I am separating routes based on roles. Each PrivateRoute is a route.
Route.tsx
export default function MCRoutes({ isUserAuthenticated, role }) {
const token = useFetchToken();
// const { data } = useFetchDataFromState("activeModule");
let privateRoutes = mcRoutesConfig[role].routes.map(
({ id, component, path, exact }) => (
<PrivateRoute
// key={id}
exact={exact}
isUserAuthenticated
path={path}
component={component}
/>
)
);
return (
<Switch>
{privateRoutes}
<Route component={NoPageFound} />
</Switch>
);
}
PrivateRoute
export default function PrivateRoute({
component: Component,
isUserAuthenticated,
...props
}) {
return (
<Route
{...props}
render={innerProps => {
return isUserAuthenticated ? (
<PrivateLayout>
<Component {...innerProps} />
</PrivateLayout>
) : (
<Redirect
to={{
pathname: "/login",
state: { from: props.location }
}}
/>
);
}}
/>
);
}
But when I do this, React asks me to provide key for each item in map function. And if I pass key as prop then it remounts components when route changes. How to solve this ?
My solution is to use the same key for all routes. No warning and seems like it works just fine.
const Routes = ({ routes }) => {
return (
<Switch>
{routes.map(props => {
return <RouteWithLayout key={1} {...props} />
})}
</Switch>
)
}
This is most probably working due to how Switch works. It'll check paths and renders the only one exactly that matches.
The map function in JS provides a second argument to the function you give it, which is the index of the current iteration. The React community suggests that you can use that if you cannot use other properties.
So you could do like this:
...
let privateRoutes = mcRoutesConfig[role].routes.map(
({ id, component, path, exact }, index) => (
<PrivateRoute
key={index}
exact={exact}
isUserAuthenticated
path={path}
component={component}
/>
)
);
return ...
That should work.
I'm looking for a way to do some route protection with react-router-4. Looking at an example in the documentation, they create a Component which is rendered like this:
<PrivateRoute path="/protected" component={Protected} />
and the privateRoute component:
const PrivateRoute = ({ component: Component, ...rest }) => (
<Route {...rest} render={props => (
fakeAuth.isAuthenticated ? (
<Component {...props}/>
) : (
<Redirect to={{
pathname: '/login',
state: { from: props.location }
}}/>
)
)}/>
)
I don't really understand why I should want to pass the "Protected" component as a property and then have to take care of spreading all the ...props and ...rest.
Before I was reading this doc (and other example), I created the following code, which just nest the routes in another component which takes care of the authentication part.
Because my example (which seems to work perfectly well), looks way more simplistic, I must be missing something.
Are there any downsides on this approach?
import React, { Component } from 'react';
import { BrowserRouter as Router, Route, Switch, Redirect } from 'react-router-dom';
import Nav from './Nav';
// dummy
const Auth = {
isAuthenticated: () => { return true; }
}
const Home = () => <h1>Home</h1>
const SignIn = () => <h1>SignIn</h1>
const About = () => <h1>About</h1>
class PrivateOne extends Component {
render() {
console.log(this.props);
return <h1>Private</h1>
}
}
const PrivateTwo = () => <h1>PrivateTwo</h1>
const PrivateThree = () => <h1>PrivateThree</h1>
const NotFound = () => <h1>404</h1>
const Private = ({isAuthenticated, children}) => {
return(
isAuthenticated ? (
<div>
<h1>Private</h1>
{children}
</div>
) : (
<Redirect to={{
pathname: '/sign_in',
}}/>
)
)
}
const App = () =>
<div>
<Router>
<div>
<Nav />
<Switch>
<Route exact path="/" component={Home} />
<Route path="/about" component={About} />
<Route path="/sign_in" component={SignIn} />
<Private isAuthenticated={Auth.isAuthenticated()}> {/* or some state later on */}
<Route path="/private1" component={PrivateOne} />
<Route path="/private2" component={PrivateTwo} />
<Route path="/private3" component={PrivateThree} />
</Private>
<Route component={NotFound} />
</Switch>
</div>
</Router>
</div>
export default App;
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 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}} />