score:4

Accepted answer

In your protectedRoute component, you are not receiving or utilizing render prop which you are sending in the line:

render={(props) => ( 
  <div>
    <Main />   
    <ClientEdit />
  </div>
)}

instead of using render send the component in component prop like :

component={(props) => ( 
  <div>
    <Main />   
    <ClientEdit />
  </div>
)}

Also check react router's docs to see when to use component prop and when to use render prop. It would be much better if you can change your protectedRoute to handle both.

score:0

I think you need to create a custom component returning :

return(
  <div>
   <Main />   
   <ClientEdit />
  </div>)

Then import it and use it in your authenticated component like this :

<Authenticated
   path="/clients/:id/edit"
   component={CustomComponent}
 />

Edit: you can also handle render prop in your Authenticated component if provided :

if (this.props.render && this.currentUser()) {
  return(
    <Route
      {...rest}
      render={this.props.render}
    />
} else {
    return (
       <Route
         {...rest}
         render={props => this.currentUser() ?
            <Component currentUser={this.currentUser} {...props} /> : 
            <Redirect
                to={{
                  pathname: '/auth/login',
                  state: { from: props.location }
                }}
             />
          }
        />
      )
}

score:0

import React from 'react';
import { Route, Redirect } from "react-router-dom";
const PeivateRoute = ({ component: component, ...rest }) => {
  return (
     <Route
        {...rest}
        render = {props => (false ? <component {...props}/> : <Redirect to="/" />)}
         />
);

};

export default PeivateRoute;

score:7

I'm a little late, but for anyone still needing this, I found that this works for me.

export function PrivateRoute({ component: Component = null, render: Render = null, ...rest }) {
  const authService = new AuthService();

  return (
    <Route
      {...rest}
      render={props =>
        authService.isAuthenticated ? (
          Render ? (
            Render(props)
          ) : Component ? (
            <Component {...props} />
          ) : null
        ) : (
          <Redirect to={{ pathname: '/login', state: { from: props.location } }} />
        )
      }
    />
  );
}

And in my routes I use it like so:

<PrivateRoute
    path="/some-route/edit"
    render={props => <MyComponent {...props} isAwesome={true} />} />

Related Query

More Query from same tag