TypeError: instance.render is not a function while using react-router-dom

Question

Hi If any one can help. Thanks in advance

In console I am also getting this

index.js:1 Warning: AppBootUp(...): No render method found on the returned component instance: you may have forgotten to define render

this is my App.js

import React from "react";
import AppRoutes from "../routes/routers";
import { createStore } from 'redux'
import rootReducer from '../store/reducers/index'
import {Provider} from "react-redux";

const store = createStore(rootReducer);

export default class AppBootUp extends React.Component<> {

    static render() {
        return (
            <Provider store={store}>
            <AppRoutes/>
            </Provider>
        );
    }
}

this is my AppRoutes

import React from "react";
import { BrowserRouter as Router, Redirect, Route, Switch } from "react-router-dom";
import Login from "../components/Login/login"

const routesConfig = [
    {
        path: "/",
        component: Login,
        name: "Login",
        exact: true
    }
];

const AppRoutes = () => {
    return (
        <Router>
            <Switch>
                {routesConfig.map(config => {
                    return (
                        <Route
                            exact={config.exact && true}
                            key={`${config.name}`}
                            path={config.path}
                            render={(props) => {
                                const ComponentToRender = config.component;
                                return <ComponentToRender {...props} />;
                            }}
                        />
                    );
                })}
                <Redirect to="/" />
            </Switch>
        </Router>
    );
};

export default AppRoutes;;

this is login.js

import React from "react";

export default class Login extends React.Component {

    constructor(props) {
        super(props);
    }

    render() {
        return (
            <div>
                <p>
                   hello
                </p>
            </div>
        );
    }
}

I am using react-router-dom. I think, I am missing something little here.

Jagrati · Accepted Answer · 2020-05-03 18:22:35Z

1

Remove static method from render method in AppBootUp class. If you define a render method as static, it won't be available in class instance, which is why you are getting this error.

export default class AppBootUp extends React.Component<> {

    render() {
        return (
            <Provider store={store}>
            <AppRoutes/>
            </Provider>
        );
    }
}

answered May 3, 2020 at 18:22

Jagrati

12.3k9 gold badges37 silver badges60 bronze badges

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

1 Comment

Jagrati Over a year ago

u might need to disable that warning from you IDE config.

Ajeet Shah · Accepted Answer · 2020-05-03 18:27:53Z

1

You need to remove static before render method of AppBootUp.

render shouldn't be a static property of React class component otherwise it won't exist on component's instance and would become unavailable.

As static properties don't exist on class instance but on the Class itself.

answered May 3, 2020 at 18:27

Ajeet Shah

19.9k10 gold badges66 silver badges107 bronze badges

Comments

Abhi · Accepted Answer · 2020-05-03 18:36:04Z

0

Remove static before render in Appboot. render should not be a static property of React class component otherwise it won't exist on component's instance. As static properties don't exist on class instance but on the Class itself.

Normally this happens when you accidentally alt+enter on render in Webstorm. when it shows warning that this method can be static.

answered May 3, 2020 at 18:36

Abhi

1,1771 gold badge13 silver badges25 bronze badges

Collectives™ on Stack Overflow

TypeError: instance.render is not a function while using react-router-dom

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related