反應路由器v4 +流星createContainer-路由不呈現

我遇到了一個問題，使用流星的createContainer與React路由器v4。我已經用v3成功地使用了它，但是當我嘗試使用v4設置路由時，它會加載主路由，然後不會再呈現其他內容。如果我將App更改爲功能性無狀態組件並繞過數據層，則路由工作正常，所以我知道它在那裏。反應路由器v4 +流星createContainer-路由不呈現

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

我知道我錯過了一些可能超級基本的東西，而這正在推動着我的堅果。謝謝。

來源

2017-06-23 John A Maloney

嘗試包裹App.jsx與withRouter

還要注意的是流星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));

來源

2017-11-06 14:22:58

反應路由器v4 +流星createContainer-路由不呈現

回答

相關問題