React Router学习笔记(2)

前端之家收集整理的这篇文章主要介绍了React Router学习笔记(2)前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

参考https://react-guide.github.io/react-router-cn/docs/guides/basics/RouteConfiguration.html
路由配置

  1. import React from 'react'
  2. import { Router,Route,Link } from 'react-router'
  3.  
  4. const App = React.createClass({
  5. render() {
  6. return (
  7. <div>
  8. <h1>App</h1>
  9. <ul>
  10. <li><Link to="/about">About</Link></li>
  11. <li><Link to="/inBox">InBox</Link></li>
  12. </ul>
  13. {this.props.children}
  14. </div>
  15. )
  16. }
  17. })
  18.  
  19. const InBox = React.createClass({
  20. render() {
  21. return (
  22. <div>
  23. <h2>InBox</h2>
  24. {this.props.children || "Welcome to your InBox"}
  25. </div>
  26. )
  27. }
  28. })
  29.  
  30. const Message = React.createClass({
  31. render() {
  32. return <h3>Message {this.props.params.id}</h3>
  33. }
  34. })
  35.  
  36. React.render((
  37. <Router>
  38. <Route path="/" component={App}>
  39. <Route path="about" component={About} />
  40. <Route path="inBox" component={InBox}>
  41. <Route path="messages/:id" component={Message} />
  42. </Route>
  43. </Route>
  44. </Router>
  45. ),document.body)
URL 组件
/ App
/about App -> About
/inBox App -> InBox
/inBox/messages/:id App -> InBox -> Message

猜你在找的React相关文章