Daniele M
Daniele M

Reputation: 21

React Check the render method of `Route`

I'm going crazy. I'm building some examples with the aim to learn React.js. Actually I crashed against the TRANSITIONGROUP + ROUTER. I can compile without problems, but then I get the following error:

Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports. Check the render method of Route.

In particular, it signs with red the line with the render method in Index.js

    const root = document.getElementById('root')
    if (root !== null) {
      ReactDOM.render(<App /> , root)
    }

and it gives me the suspicion that could be a problem inside the App.js

    ...
    <Route path="/" render={(props) => <AppRoutes {...props} />} />
    ...

Inside AppRoutes I defined all the Transition logic

    <TransitionGroup>
        <Transition
          key={window.location.pathname}
          timeout={500}
          mountOnEnter={true}
          unmountOnExit={true}
        >
          {animation => (
            <Switch location={this.props.location}>
              <Route
                exact
                path="/"
                render={(props) => <Home {...props} animation={animation} />}
              />
              <Route
                path="/component1/"
                render={(props) => <Component1 {...props} animation={animation} />}
              />
              <Route
                path="/component2/"
                render={(props) => <Component2 {...props} animation={animation} />}
              />
            </Switch>
          )}
        </Transition>
      </TransitionGroup>

Then inside single components, I want to get the transition state and apply my favorite animations.

In all cases I use this for imports:

    import mycomponent from "mycomponent-path";

and for exports from inside components:

    export default mycomponent

inside components, I use this to extend react component:

    class mycomponent extends Component

I spent days searching and experimenting with zero results. The code in the public github repo: https://github.com/acidinucleici/lezioni-react/tree/master/app04

I hope in the proper suggestion to make router and transition work :)

Upvotes: 1

Views: 2094

Answers (0)

Related Questions