Question

我在使用Meteor的createContainer和React Router v4时遇到了问题。我已经成功地使用了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

另请注意，Meteor 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));

React Router v4 + Meteor createContainer - 不渲染的路由

1 个答案: