I´m trying to use React Router V4 with new React´s context API. Here is my code:

class App extends Component {
    static propTypes = {
        router: PropTypes.func.isRequired,
        module: PropTypes.string.isRequired,
        sideMenuConfig: PropTypes.string
    };

    render() {

        let baseName = "/" + this.props.module;

        // This will get my dashboard ponent, loading context from database
        let navComponent = (
            <MyCustomAppContextProvider>
                <AppContext.Consumer>
                    {context => 
                        <Dashboard
                            context={context}
                            module={this.props.module}
                            router={router}
                            sideMenuConfig={this.props.sideMenuConfig}
                        />
                    }
                </AppContext.Consumer>
            </MyCustomAppContextProvider>
            );

        let routes = null;
        if (!isAuthenticated()) {
            routes = <Auth 
                        baseName={baseName}
                     />;
        } else {
            routes = (
                <Switch>
                    <Route exact path="/logout" ponent={Logout} />
                    <Route exact path="/auth" ponent={Logout} />
                    <Route exact path="/" ponent={navComponent} />
                    <Route
                        exact
                        path="/:screen"
                        ponent={navComponent}
                    />
                    <Route
                        exact
                        path="/:screen/:action"
                        ponent={navComponent}
                    />
                    <Route
                        exact
                        path="/:screen/:action/:id"
                        ponent={navComponent}
                    />

                    <Route ponent={PageNotFoundError} />
                </Switch>
            );
        }

        return (
            <BrowserRouter basename={baseName}>
                {routes}
            </BrowserRouter>
        );
    }
}

export default App;

router contains a router function that will load my screen depending on the navigation path.
module is the module name.
sideMenuConfig is a json configuration for my side menu.

When trying to run I´m getting the following error from react router:

Element type is invalid: expected a string (for built-in ponents) or a class/function (for posite ponents) but got: object

Check the render method of `Route`.

I expect in Dashboard to receive all the props passed plus the match property to run the router.

I´m trying to use React Router V4 with new React´s context API. Here is my code:

class App extends Component {
    static propTypes = {
        router: PropTypes.func.isRequired,
        module: PropTypes.string.isRequired,
        sideMenuConfig: PropTypes.string
    };

    render() {

        let baseName = "/" + this.props.module;

        // This will get my dashboard ponent, loading context from database
        let navComponent = (
            <MyCustomAppContextProvider>
                <AppContext.Consumer>
                    {context => 
                        <Dashboard
                            context={context}
                            module={this.props.module}
                            router={router}
                            sideMenuConfig={this.props.sideMenuConfig}
                        />
                    }
                </AppContext.Consumer>
            </MyCustomAppContextProvider>
            );

        let routes = null;
        if (!isAuthenticated()) {
            routes = <Auth 
                        baseName={baseName}
                     />;
        } else {
            routes = (
                <Switch>
                    <Route exact path="/logout" ponent={Logout} />
                    <Route exact path="/auth" ponent={Logout} />
                    <Route exact path="/" ponent={navComponent} />
                    <Route
                        exact
                        path="/:screen"
                        ponent={navComponent}
                    />
                    <Route
                        exact
                        path="/:screen/:action"
                        ponent={navComponent}
                    />
                    <Route
                        exact
                        path="/:screen/:action/:id"
                        ponent={navComponent}
                    />

                    <Route ponent={PageNotFoundError} />
                </Switch>
            );
        }

        return (
            <BrowserRouter basename={baseName}>
                {routes}
            </BrowserRouter>
        );
    }
}

export default App;

router contains a router function that will load my screen depending on the navigation path.
module is the module name.
sideMenuConfig is a json configuration for my side menu.

When trying to run I´m getting the following error from react router:

Element type is invalid: expected a string (for built-in ponents) or a class/function (for posite ponents) but got: object

Check the render method of `Route`.

I expect in Dashboard to receive all the props passed plus the match property to run the router.

• javascript
• reactjs
• react-router-v4
• react-context

Share Improve this question Follow edited Aug 4, 2018 at 21:48 halfer 20.4k1919 gold badges109109 silver badges202202 bronze badges asked Apr 25, 2018 at 22:24 MendesMendes 18.6k3838 gold badges166166 silver badges282282 bronze badges 9

• 1 Should that be AppContext.Provider with a dot? Also what is the point of rendering a Consumer as an immediate child of a Provider? The error es from react. Something that you are trying to render is an object. Could you add the stack trace? In which ponent does it happen? – trixn Commented Apr 25, 2018 at 22:40
• This is the new context API notation... Check it out at official documentation. The Consumer grabs context from database to offer to Provider. The error seens to be happening inside react-router-v4. No clear stacktrace. – Mendes Commented Apr 25, 2018 at 22:42
• 1 I know the new api but i don't see any point in using the Provider and the Consumer in the same ponent. Where do you populate the context with data? – trixn Commented Apr 25, 2018 at 22:46
• What does "no clear stack trace" mean? The error happens while rendering a ponent. Open your browser console and see in which ponents render that is. This error happens when you try to render a javascript object (you can't render objects). It does not e from react-router. – trixn Commented Apr 25, 2018 at 22:49
• 1 So the reason for your error probably is just the typo I was pointing to in my first ment. It has to be <AppContext.Provider> not <AppContextProvider>. But still using the context api like this makes absolutely no sense. – trixn Commented Apr 25, 2018 at 22:57

 |  Show 4 more ments

3 Answers 3

Sorted by: Reset to default 3

The problem is that you're not passing a ponent to Route

// THIS IS NOT A COMPONENT

let navComponent = (
  <MyCustomAppContextProvider>
    <AppContext.Consumer>
      {context => (
        <Dashboard
          context={context}
          module={this.props.module}
          router={router}
          sideMenuConfig={this.props.sideMenuConfig}
        />
      )}
    </AppContext.Consumer>
  </MyCustomAppContextProvider>
)

A ponent is either a class that extends React.Component or a function:

// THIS IS A COMPONENT 

let NavComponent = props => (
  <MyCustomAppContextProvider>
    <AppContext.Consumer>
      {context => (
        <Dashboard
          context={context}
          module={this.props.module}
          router={router}
          sideMenuConfig={this.props.sideMenuConfig}
        />
      )}
    </AppContext.Consumer>
  </MyCustomAppContextProvider>
)

UPDATE to your UPDATE:

You're getting confused about what is a ponent

// THIS IS A COMPONENT
let Foo = props => <div />

// THIS IS NOT A COMPONENT
let Foo = <div />

You need to pass a ponent to Route's ponent prop:

let NavComponent = props => <MyCustomAppContextProvider>...

// YES
<Route ponent={NavComponent} />

// NO
<Route ponent={<NavComponent />} />

Same happened to me, it was that context api which was causing a conflict. I also had to check every single inner ponents inside render method to make sure that none of them use context api and has no this.context available inside them. I then deleted context api stuff and wrote an alternative react-redux state, no context api, no problem

Check the form you are importing. It is necessary to put the BrowserRouter in the import. Look:

import { BrowserRouter as Router, switch, route } from "react-router-dom";