反應路由器和流星蒙戈

我想用路由器做出反應，但我有流星蒙戈一個問題，我使用流星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

反應路由器和流星蒙戈

回答

相關問題