reagieren Router und Meteor Mongo

Question

IREACT Router verwenden möchten, aber ich habe ein Problem mit Meteor Mongo ich Meteor 1.5.1 main.js:

Meteor.startup(() => { 
    Tracker.autorun(() => { 
    let translates = Translates.find().fetch(); 
    ReactDom.render(<App translates={translates}/>, document.getElementById('app')); 
    }); 
}); 

App.js

import React from 'react'; 

import AddTranslate from './AddTranslate'; 
import TranslateList from './TranslateList'; 

export default class App extends React.Component { 

    render() { 
    return (
     <div> 
     <p>Firts text</p> 
     <h1>Hello :D</h1> 
     <TranslateList translates={this.props.translates}/> 
     <AddTranslate/> 
     </div> 
    ); 
    } 
}; 

App.propTypes = { 
    translates: React.PropTypes.array.isRequired 
}; 

ich weiß, ich brauche etwas wie folgt aus:

export const history = createBrowserHistory({ 
    forceRefresh: true 
});  

export const routes = (
<Router history={history}> 
    <Switch> 
    <Route path="/beginner" component={Beginner}/> 
     <Route path="/" component={App}/> 
    </Switch> 
</Router> 
); 

und Änderung:

ReactDom.render(<App translates={translates}/>, document.getElementById('app')); 

ReactDom.render(<routes/>, document.getElementById('app')); 

aber was mit übersetzungen = {translated}?

Dank für Hilfe :)

Answer 1

Ok, mein neuer Code funktioniert, habe ich nicht Fehler in der Konsole bekommen, aber ich habe neues Problem: Konsole neu hinzugefügten Worte sehen, aber Web nicht jetzt, ich habe: main.js

const history = createBrowserHistory({ 
    forceRefresh: true 
}); 

const translates = Translates.find().fetch(); 

class MyComponent extends React.Component { 
    render() { 
     return <App translates={translates}/> 
    } 
} 

Meteor.startup(() => { 
    ReactDOM.render(
     <Router history={history}> 
     <Switch> 
      <Route path="/beginner" component={Beginner}/> 
      <Route path="/" component={MyComponent}/> 
     </Switch> 
     </Router>, 
     document.getElementById('app')); 
}); 

und App.js

const App = (props) => { 
    return (
     <div> 
     <p>Hello!</p> 
     <a href="/beginner">only start</a> 
     <TranslateList translates={props.translates}/> 
     <AddTranslate/> 
     </div> 
    ); 
}; 

export default App; 

Vielleicht ist das Problem darin:

export default class TranslateList extends React.Component { 
    renderTranslates() { 
    return this.props.translates.map((translate) => { 
     return <Translate key={translate._id} translate={translate}/>; 
    }); 
    } 
    render() { 
    return (
     <div> 
     {this.renderTranslates()} 
     </div> 
    ); 
    } 
}; 

TranslateList.propTypes = { 
    translates: React.PropTypes.array.isRequired 
}; 

Was denkst du? Danke für die Hilfe :-)