0

I'm experiencing an issue using Meteor's createContainer with React Router v4. I've used it successfully with v3, but when I try to set up routing with v4 it loads the Main route and then won't render anything else. If I change App to a functional stateless component and bypass the data layer, the routing works fine, so I know it's something in there.

App.jsx:

import React from 'react'
import {Navigation} from './Navigation'
import {Grid, MenuItem} from 'react-bootstrap'
import {LinkContainer} from 'react-router-bootstrap'
import { createContainer } from 'meteor/react-meteor-data'
import {Products} from '../api/products'
import {Main} from './Main'

class App extends React.Component {
  render () {
    const {ready, products} = this.props;
    if (!ready) return <h1>Loading...</h1>
    const vendorsList = [...new Set(products.map(item => item.vendor).filter(i => !!i))]
    const vendors = vendorsList.map((item, index) => <LinkContainer key={index} to={`/vendors/${item}`}><MenuItem eventKey={(index+1) / 10 + 4}>{item}</MenuItem></LinkContainer>)
    return (
      <div>
        <Navigation vendors={vendors} />
        <Grid>
          <Main products={products} />
        </Grid>
      </div>
    )
  }
}

export default createContainer(({params}) => {
    const handle = Meteor.subscribe('products');
    return {
      ready: handle.ready(),
      products: Products.find({}, {sort: {name: 1}}).fetch()
    };
}, App);

Navigation.jsx:

import React from 'react'
import {NavLink} from 'react-router-dom'
import {Navbar, Nav, NavItem, NavDropdown, MenuItem} from 'react-bootstrap'
import {LinkContainer} from 'react-router-bootstrap'

export const Navigation = ({vendors}) => (
<Navbar>
    <Navbar.Header>
      <LinkContainer to='/'><Navbar.Brand>IM 0.1</Navbar.Brand></LinkContainer>
    </Navbar.Header>
    <Nav>
      <NavDropdown eventKey={1} title='Products' id='basic-nav-dropdown'>
        <LinkContainer to='/products'><MenuItem eventKey={1.1}>Products List</MenuItem></LinkContainer>
        <LinkContainer to='/products/new'><MenuItem eventKey={1.2}>Enter New Product</MenuItem></LinkContainer>
      </NavDropdown>
      <NavItem eventKey={2}>Inventory</NavItem>
      <NavDropdown eventKey={3} title='Invoices' id='basic-nav-dropdown'>
        <MenuItem eventKey={3.1}>Enter New Invoice</MenuItem>
        <MenuItem divider />
        <MenuItem eventKey={3.2}>Manage Invoices...</MenuItem>
      </NavDropdown>
      <NavDropdown eventKey={4} title='Vendors' id='basic-nav-dropdown'>
        {vendors}
        <MenuItem divider />
        <MenuItem eventKey={(vendors.length + 1)/10 + 4}>Vendors List...</MenuItem>
      </NavDropdown>
    </Nav>
  </Navbar>
)

main.js:

import React from 'react'
import { Meteor } from 'meteor/meteor'
import { render } from 'react-dom'
import {BrowserRouter} from 'react-router-dom'
import App from '../imports/ui/App'

Meteor.startup(() => {
  render((
    <BrowserRouter>
      <App />
    </BrowserRouter>
  ), document.getElementById('render-target'));
});

I know I'm missing something that's probably super basic, and it's driving me nuts. Thanks.

1 Answer 1

3

Try wrapping App.jsx with withRouter

Also note that Meteor createContainer function has been replaced by withTracker

import React from 'react'
import { withTracker } from 'meteor/react-meteor-data';
import { withRouter } from 'react-router-dom';
...

class App extends React.Component {
  ...
}

export default withRouter(withTracker(({params}) => {
    ...
})(App));
0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.