React-router-V4 render error when using ReactJS new context API

Question

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 component, 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" component={Logout} />
                    <Route exact path="/auth" component={Logout} />
                    <Route exact path="/" component={navComponent} />
                    <Route
                        exact
                        path="/:screen"
                        component={navComponent}
                    />
                    <Route
                        exact
                        path="/:screen/:action"
                        component={navComponent}
                    />
                    <Route
                        exact
                        path="/:screen/:action/:id"
                        component={navComponent}
                    />

                    <Route component={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 components) or a class/function (for composite components) 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.

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 comes from react. Something that you are trying to render is an object. Could you add the stack trace? In which component does it happen? — trixn
– 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
– Mendes, Commented Apr 25, 2018 at 22:42
I know the new api but i don't see any point in using the Provider and the Consumer in the same component. Where do you populate the context with data? — trixn
– trixn, Commented Apr 25, 2018 at 22:46
What does "no clear stack trace" mean? The error happens while rendering a component. Open your browser console and see in which components render that is. This error happens when you try to render a javascript object (you can't render objects). It does not come from react-router. — trixn
– trixn, Commented Apr 25, 2018 at 22:49
So the reason for your error probably is just the typo I was pointing to in my first comment. It has to be <AppContext.Provider> not <AppContextProvider>. But still using the context api like this makes absolutely no sense. — trixn
– trixn, Commented Apr 25, 2018 at 22:57

azium · Accepted Answer · 2018-04-25 23:15:56Z

3

The problem is that you're not passing a component 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 component 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 component

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

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

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

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

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

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

edited Apr 25, 2018 at 23:15

answered Apr 25, 2018 at 23:06

azium

20.7k8 gold badges63 silver badges81 bronze badges

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

3 Comments

Mendes Over a year ago

For some other reason the error persists... How is the new component used in the <Route> method?

Mendes Over a year ago

Yes, I just found out about that. Now it works. Thanks for your precious help, and a nice upvote!

azium Over a year ago

np, I would take @trixn 's advice though. Your provider / Consumer placement doesn't make very much sense

Nodir · Accepted Answer · 2020-11-27 13:15:50Z

0

Same happened to me, it was that context api which was causing a conflict. I also had to check every single inner components 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

answered Nov 27, 2020 at 13:15

Nodir

192 bronze badges

Comments

Ricardo Sousa · Accepted Answer · 2022-02-22 16:45:19Z

0

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";

answered Feb 22, 2022 at 16:45

Ricardo Sousa

1

Collectives™ on Stack Overflow

React-router-V4 render error when using ReactJS new context API

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related