How to use React.createContext() with react router?

Question

I am trying to use React.createContext() with react router but at the moment has been impossible.

const Context = React.createContext()

<Context.Provider value={{ valueTest: 1 }}>
  <HashRouter>
    <Switch>
      <Route
        exact
        path="/"
        render={() => <h1>HelloWorld</h1>} />
    </Switch>
  </HashRouter>
</Context.Provider>

I always get this error

Uncaught Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object.

Can someone help me?

Shubham Khatri · Accepted Answer · 2018-04-30 16:57:25Z

It seems like an issue rendering your context value, the following code works well

index.js

import React from "react";
import { render } from "react-dom";
import { HashRouter, Switch, Route } from "react-router-dom";
import Hello from "./Hello";
import { Context } from "./context";
const App = () => (
  <Context.Provider value={{ valueTest: 1 }}>
    <HashRouter>
      <Switch>
        <Route
          exact
          path="/"
          render={props => <Hello {...props} name="CodeSandbox" />}
        />
      </Switch>
    </HashRouter>
  </Context.Provider>
);

render(<App />, document.getElementById("root"));

context.js

import React from "react";
export const Context = React.createContext();

Hello.js

import React from "react";
import { Context } from "./context";

export default ({ name }) => (
  <Context.Consumer>
    {value => (
      <h1>
        Hello {name} {value.valueTest}!
      </h1>
    )}
  </Context.Consumer>
);

Working codesandbox

Collectives™ on Stack Overflow

How to use React.createContext() with react router?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related