How to conditionally render routes with react-router-dom? - reactjs

Question

How do I set up conditional routes with exclusive Components in React?
I want the upload route to be exclusive to when authenticated, which is set in ComponentdDidMount.
render = () => {
let routes = (
<Switch>
<Route path = "/" exact render = {() => <Home />
<Route path = "/video" render = {() => <Video />} />
<Route path = "/upload" exact render = {() => <Upload />} />
<Redirect to = "/foo"/>
</Switch>
)
if(this.props.isAuthenticated){
routes = (
<Switch>
<Route path = "/" exact render = {() => <Dashboard />} />
<Route path = "/upload`" render = {() => <Upload />} />
<Route path = "/video" render = {() => <Video />} />
<Route path = "/foo" render = {() => <h1>Foo</h1>} />
<Redirect to = "/bar" />
</Switch>
)
}
return (
<div className="App">
<Layout>
{routes}
</Layout>
</div>
)
}
Right it's using the first set of Route components to check the route, and if the route doesn't match I get redirected to '/foo' which then renders the h1. If I try to access 'upload', I believe it gets rendered for a split second, and then I end up with infinite redirects to '/bar'. '/video' does render the video component. Can someone provide some information as to what may be going wrong and how I can make sure only one set of Routes is being used?

Answer 1

Maybe just need to handle authentication on private routes, you can get more info here
I had the same question a few months ago, and what I did is to create a wrapper to check if user has the necessary rights to see that item.
render: () => AuthorizeRoute(
Amortizations, // Component to load
'anyvalidRole4ex' // {string} constant
),
If you are using redux, could be something like this:
import React from 'react';
import {connect} from 'react-redux';
import PropTypes from 'prop-types';
import NotAllowed from './NotAllowed';
export default function HasPermissionWrapper(
WrappedComponent,
requiredRoles,
FallbackComponent
) {
class HasPermission extends React.PureComponent {
static propTypes = {
userRoles: PropTypes.object.isRequired,
};
render() {
const userRoles = this.props.userRoles.toJS();
const hasPermission = userRoles
.map(({roleId}) => requiredRoles.includes(roleId))
.some((checks) => !!checks);
if (!hasPermission) {
if (FallbackComponent) {
return <FallbackComponent />;
}
return <NotAllowed userRoles={userRoles} />;
}
return <WrappedComponent {...this.props} />;
}
}
const mapStateToProps = ({auth}) => ({
userRoles: auth.getIn(['user', 'roles']),
});
return connect(mapStateToProps)(HasPermission);
}