React router 4 custom component giving render function error

Question

import React,{Component,} from 'react';
import {Route,Redirect} from 'react-router-dom';

export default class PrivateRoute extends React.Component{
    constructor(){
        super()
    }
    render(){
        const {component, authed, ...rest}=this.props;
        return(
            <Route
            {...rest}
            render={(props) => authed === true
              ? <Component {...this.props} />
              : <Redirect to={{pathname: '/login', state: {from: props.location}}} />} />
        )
    }
}

Error:ReactComponent(...): No render method found on the returned component instance: you may have forgotten to define render.

Does your component look exactly the same of there are some things in the constructor as well — Shubham Khatri
– Shubham Khatri, Commented Nov 7, 2017 at 12:32
<Component {...this.props} /> is not a valid component you need to create a new component class with a render method and put that there instead. — Dan Mason
– Dan Mason, Commented Nov 7, 2017 at 14:04

Dan Mason · Accepted Answer · 2017-11-07 14:09:43Z

2

You cannot use Component as a output in your render method you need to create classes that extend it.:

Create TestComponent

import React from 'react';
import {Route, Redirect} from 'react-router-dom';

export default class TestComponent extends React.Component{
    render(){
        return <span>Hello</span>
    }
}

PrivateRoute

Please note that I have removed the constructor as it is not needed here:

import React from 'react';
import {Route, Redirect} from 'react-router-dom';
import TestComponent from './TestComponent';

export default class PrivateRoute extends React.Component{
    render(){
        const {component, authed, ...rest}=this.props;
        return(
            <Route
            {...rest}
            render={(props) => authed === true
              ? <TestComponent {...this.props} />
              : <Redirect to={{pathname: '/login', state: {from: props.location}}} />} />
        )
    }
}

answered Nov 7, 2017 at 14:09

Dan Mason

2,3371 gold badge18 silver badges38 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Dan Mason Over a year ago

@VivekMalik Please click the tick and upvote this answer so that others know that it has been resolved.

Collectives™ on Stack Overflow

React router 4 custom component giving render function error

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related