7.named-components


/ Published in: Other
Save to your folder(s)



Copy this code and paste it in your HTML
  1. import React from 'react';
  2. import { Router, Route, Link, IndexRoute, hashHistory } from 'react-router';
  3.  
  4. const Home = () => <h1>Home</h1>
  5. const HomeBody = () => <div>this is the home body</div>
  6. const Other = () => <h1>Other</h1>
  7. const OtherBody = () => <div>this is the Other body</div>
  8.  
  9. const Container = (props) =>
  10. <div>{props.header}{props.body}<Links /></div>
  11.  
  12. const Links = () =>
  13. <nav>
  14. <Link to="/">Home</Link>
  15. <Link to="/other">Other</Link>
  16. </nav>
  17.  
  18. class App extends React.Component {
  19. render(){
  20. return (
  21. <Router history={ hashHistory }>
  22. <Route path="/" component={Container}>
  23. <IndexRoute components={ { header: Home, body: HomeBody } }></IndexRoute>
  24. <Route path="/other" components={ { header: Other, body: OtherBody} }></Route>
  25. </Route>
  26. </Router>
  27. );
  28. }
  29. }
  30.  
  31. export default App;

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.