Converting React function component to class component issue

Question

I have the following react functional component to help support authentication required routes with react-router.

const PrivateRoute = ({ component: Component, ...rest }) => (
  <Route {...rest} render={props => (
    isAuthenticated() ? ( 
        <Component {...props}/>
    ) : (
        <Redirect to={{
            pathname: '/login', 
            state: {from: props.location }
        }}/>
    )
  )}/>
)

I need to convert this from a functional component to a class component so I can take advantage of the componentDidMount method of React.Component. Unfortunately I'm having trouble figuring out how to migrate this. If I take it as is I need to replicate the Component and ...rest parameters, but I'm not sure how to do that. I think I can get the Component parameter with this.props.component, but I'm not sure how to pull ...rest. I'm new to JSX and ES6 so any help or guidance would be much appreciated.

can you show the code with use of this functional component ? — jmac, Apr 29 '17 at 12:28

score 27 · Answer 1 · edited Apr 18 '20 at 18:02

The functional component is the render function, therefore:

class PrivateRoute extends React.Component {
    render() {
       const {component: Component, ...rest} = this.props;

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

or, written a bit more readable:

class PrivateRoute extends React.Component {
    render() {
       const {component: Component, ...rest} = this.props;

       const renderRoute = props => {
           if (isAuthenticated()) {
              return (
                  <Component {...props} />
              );
           }

           const to = {
               pathname: '/login', 
               state: {from: props.location}
           };

           return (
               <Redirect to={to} />
           );
       }

       return (
           <Route {...rest} render={renderRoute}/>
       );
    }
}

The thing i don't understand is `const {component: Component, ...rest} = this.props;`. What does this do, it's like a reversed variable? — Rickerd, Apr 17 '18 at 23:19
@Mr. Bear: This is [destructuring assignment](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment) — Treefish Zhang, Apr 23 '18 at 21:13

score 1 · Answer 2 · answered Apr 12 '19 at 01:45

A nice, clean refactor by extending the Route component:

class PrivateRoute extends Route {

    render() {
        return isAuthenticated()
            ? super.render()
            : <Redirect to={{
                pathname: '/login',
                state: {from: props.location}
            }}/>;
    }
}

If you use this, you have to wrap your <PrivateRoute/>s in a <Switch/>, as below. Otherwise, you will have duplicate redirects and the page will fail to load.

<Router>
    <Navbar/>
    <SideDrawer/>
    <Switch>
        <Route              path="/tokens"   component={Login}/>
        <PrivateRoute exact path="/"         component={ExampleComponent}/>
        <PrivateRoute       path="/users"    component={Users}/>
        <PrivateRoute       path="/software" component={Software}/>
    </Switch>                   
</Router>

SAMUEL · Answer 3 · 2023-01-18T05:41:19.153

@Sulthans answer is correct and directly answers your question. But I would like to put the answer differently with a suggestion.

Based on your question your requirement is something like using life cycle hooks ie componentDidMount in your functional component.

I would like to suggest continuing to use the functional component and getting the hook implemented using useEffect provided if you are using the latest react

useEffect(() => {
  console.log('mount it!');
}, []); // passing an empty array as second argument triggers the callback in useEffect only after the initial render thus replicating `componentDidMount` lifecycle behaviour

I recommend this due to the following reasons

It reduces the boilerplate
It promotes readability
React team nowadays promotes the use of function components. Recommend reading gradual adoption strategy.

score 0 · Answer 4 · answered Oct 10 '21 at 13:11

For your case useEffect hook will be the best choice.

You can simply add use effect hook to your component

const PrivateRoute = ({ component: Component, ...rest }) => {

useEffect(()=>{
  // your logic for componentDidMount here
}, []);

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

Converting React function component to class component issue

4 Answers4

Linked