Você não pode selecionar mais de 25 tópicos Os tópicos devem começar com uma letra ou um número, podem incluir traços ('-') e podem ter até 35 caracteres.

Router.jsx 1.8KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091
  1. /**
  2. * Original Source code from https://reacttraining.com/react-router/web/example/basic
  3. */
  4. import React from 'react';
  5. import { HashRouter as Router, Route, Link } from 'react-router-dom';
  6. import withTracker from './withTracker';
  7. import Events from './Events';
  8. function Topic({ match }) {
  9. return (
  10. <div>
  11. <h3>{match.params.topicId}</h3>
  12. </div>
  13. );
  14. }
  15. function Home() {
  16. return (
  17. <div>
  18. <h2>Home</h2>
  19. </div>
  20. );
  21. }
  22. function About() {
  23. return (
  24. <div>
  25. <h2>About</h2>
  26. </div>
  27. );
  28. }
  29. function Topics({ match }) {
  30. return (
  31. <div>
  32. <h2>Topics</h2>
  33. <ul>
  34. <li>
  35. <Link to={`${match.url}/rendering`}>Rendering with React</Link>
  36. </li>
  37. <li>
  38. <Link to={`${match.url}/components`}>Components</Link>
  39. </li>
  40. <li>
  41. <Link to={`${match.url}/props-v-state`}>Props v. State</Link>
  42. </li>
  43. </ul>
  44. <Route path={`${match.url}/:topicId`} component={withTracker(Topic)} />
  45. <Route
  46. exact
  47. path={match.url}
  48. render={() => <h3>Please select a topic.</h3>}
  49. />
  50. </div>
  51. );
  52. }
  53. function BasicExample() {
  54. return (
  55. <Router>
  56. <div>
  57. <ul>
  58. <li>
  59. <Link to="/">Home</Link>
  60. </li>
  61. <li>
  62. <Link to="/about">About</Link>
  63. </li>
  64. <li>
  65. <Link to="/topics">Topics</Link>
  66. </li>
  67. <li>
  68. <Link to="/events">Events</Link>
  69. </li>
  70. </ul>
  71. <hr />
  72. <Route exact path="/" component={withTracker(Home)} />
  73. <Route path="/about" component={withTracker(About)} />
  74. <Route path="/topics" component={withTracker(Topics)} />
  75. <Route path="/events" component={withTracker(Events)} />
  76. </div>
  77. </Router>
  78. );
  79. }
  80. export default BasicExample;