React Router v4 + Meteor createContainer - レンダリングしないルート

Question

React Router v4でMeteorのcreateContainerを使用しているときに問題が発生しました。私はv3でうまく使用しましたが、v4でルーティングを設定しようとすると、メインルートがロードされ、次に何もレンダリングされません。 Appを機能的なステートレスコンポーネントに変更してデータレイヤーをバイパスすると、ルーティングが正常に機能するため、そこに何かがあることがわかります。

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')); 
}); 

私はおそらく超基本的な何かが欠けていることを知っている、そしてそれは私をナッツを運転しています。ありがとう。

Answer 1

withRouter

でApp.jsxを包む試してみてください。また流星createContainer機能が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)); 

に置き換えられていることに注意してください