I’m trying to use react-router to manage the application’s routes. It does work when I import a normal page, however it doesn’t work when I try to import a page using createContainer. It only shows a blank page with no errors. What am I missing here?
routes.jsx
import React from 'react';
import { render } from 'react-dom';
import { Router, Route, IndexRoute, browserHistory } from 'react-router';
import { Page } from '../../ui/pages/Page.js';
import { TestContainer } from '../../ui/containers/TestContainer.js';
Meteor.startup( () => {
render(
<Router history={ browserHistory }>
<Route path="/" component={ App }>
<Route path="/page" component={ Page } /> //that works
<Route path="/test" component={ TestContainer } />//that does not work
</Route>
<Route path="*" component={ NotFound } />
</Router>,
document.getElementById( 'render-target' )
);
});
TestContainer.js
import { Meteor } from 'meteor/meteor';
import { createContainer } from 'meteor/react-meteor-data';
import Test from '../pages/test.jsx';
export default TestContainer = createContainer(({ params }) => {
}, Test);
test.jsx
import React, { Component, PropTypes } from 'react';
export class Test extends Component {
render() {
return (<h1>Test</h1>)
}
}
When you are importing in your routes.jsx, remove the brackets from around the TestContainer import because you have it exported as default in TestContainer.js.
Check all the exports and imports. If you export default you do not need the brackets when you import. If you don’t export default you do need the brackets for it when you import. Looks like your Test component is a regular export, but you are importing it without the brackets.
Fix all of your import/export errors. Don’t use braces for export default. You’re getting this error because the arrow function () => {} does not actually return an object. The syntax is a bit confusing, I agree. The braces represent a code block, not an object. Instead, you should write () => {return {}}, to guarantee that you’re returning a valid object from createContainer.
I lost 2 days because of this problem and thanks to you I am back on track again.
Just for the record, I will repeat what @townmulti said:
1 - If you export default you do not need the brackets when you import.
2 - If you don’t export default you do need the brackets for it when you import.
What I had to change:
routes.jsx
import TestContainer from '../../ui/containers/TestContainer.js'; // removed the brackets
TestContainer.js
import { Meteor } from 'meteor/meteor';
import { createContainer } from 'meteor/react-meteor-data';
import {Test} from '../pages/test.jsx'; // inserted the brackets
export default TestContainer = createContainer(({ params }) => { // I had to fix this
return {}}, Test);