Reputation: 21
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