反应路由器和流星蒙戈

我想用路由器做出反应，但我有流星蒙戈一个问题，我使用流星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 
};

我知道，我需要的是这样的：

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

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

和变化：

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

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

但翻译= {翻译}是什么？

感谢帮助:)

来源

2017-09-01 Djn

您可能会发现https://themeteorchef.com/blog/introducing-pup有助于学习反应+流星+ react-router-dom –

+1链接。上述Michel链接中描述的[createContainer]（https://themeteorchef.com/tutorials/using-create-container#！）方法也为您提供了一种将您的反应代码与流星代码分离的好方法。从而允许您编写更多可重用的反应组件。 – Jankapunkt

非常感谢：D此链接太棒了！ – Djn

好了，我的新代码的工作，我没有在控制台的错误，但我有新的问题：控制台可以看到新增加的话，但没有网络现在，我有： 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')); 
});

和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;

也许问题是这样的：

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

您怎么看？感谢您的帮助:-)

来源

2017-09-07 02:22:39 Djn

反应路由器和流星蒙戈

回答

相关问题