Just upgraded to react-router-dom 4.0.0. All my ponents are either regular classes or fat arrows. They are all exported using export default ThatComponent. Yet I'm getting this:

Uncaught Error: Element type is invalid: expected a string (for built-in ponents) or a class/function (for posite ponents) but got: undefined. You likely forgot to export your ponent from the file it's defined in. Check the render method of Router.

// minimal showcase
import { BrowserRouter, Match, Miss } from 'react-router';

const Router = () => (
  <BrowserRouter>
    <div>
      {/* both Match and Miss ponents below cause an error */}
      <Match exactly pattern="/login" ponent={Login} /> 
      <Match exactly pattern="/frontpage" ponent={Frontpage} />
      <Match exactly pattern="/logout" render={() => (<div>logout</div>)} />
      <Miss ponent={NoMatch} />
    </div>
  </BrowserRouter>
);

Why do the <Match> ponents think the other ponents are undefined?

Just upgraded to react-router-dom 4.0.0. All my ponents are either regular classes or fat arrows. They are all exported using export default ThatComponent. Yet I'm getting this:

Uncaught Error: Element type is invalid: expected a string (for built-in ponents) or a class/function (for posite ponents) but got: undefined. You likely forgot to export your ponent from the file it's defined in. Check the render method of Router.

// minimal showcase
import { BrowserRouter, Match, Miss } from 'react-router';

const Router = () => (
  <BrowserRouter>
    <div>
      {/* both Match and Miss ponents below cause an error */}
      <Match exactly pattern="/login" ponent={Login} /> 
      <Match exactly pattern="/frontpage" ponent={Frontpage} />
      <Match exactly pattern="/logout" render={() => (<div>logout</div>)} />
      <Miss ponent={NoMatch} />
    </div>
  </BrowserRouter>
);

Why do the <Match> ponents think the other ponents are undefined?

• javascript
• reactjs
• react-router
• react-router-dom

Share Improve this question Follow asked Mar 15, 2017 at 0:04 Michael JohansenMichael Johansen 5,13677 gold badges3333 silver badges5151 bronze badges 2

• Can you share where you found the Match ponent? – Nevin Commented Mar 15, 2017 at 5:26
• Got it from here: frontend.turing.io/lessons/react-router-4.html – Michael Johansen Commented Mar 15, 2017 at 22:29

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 9

In the final release of react-router there is no Match nor Miss. You just need to use Route. Also, you need to install and import react-router-dom package to use BrowserRouter (see React Router documentation).

To make your example work with minimal changes, you'd need to do the following:

// minimal showcase
import { BrowserRouter, Route, Switch } from 'react-router-dom';

const Router = () => (
    <BrowserRouter>
        <Switch>
            <Route exact path="/login" ponent={Login} /> 
            <Route exact path="/frontpage" ponent={Frontpage} />
            <Route exact path="/logout" render={() => (<div>logout</div>)} />
            <Route ponent={NoMatch} />
        </Switch>
    </BrowserRouter>
);

Please have a look at NoMatchExample in React Router docs to see how to and when to use Switch.

Check source of react-router here: https://unpkg./[email protected]/index.js（also https://unpkg./[email protected]/index.js）, There is no Match under it. Match maybe belong to other package.