Guest User

Untitled

a guest
Mar 22nd, 2018
84
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 1.17 KB | None | 0 0
  1. import React from 'react'
  2. import ReactDOM from 'react-dom';
  3. import {BrowserRouter, Route, Link} from 'react-router-dom';
  4.  
  5. class Home extends React.Component {
  6. render() {
  7. return(
  8. <div>
  9. <h2>Home</h2>
  10. </div>
  11. );
  12. }
  13. }
  14.  
  15. class About extends React.Component {
  16. render() {
  17. return(
  18. <div>
  19. <h2>About</h2>
  20. </div>
  21. );
  22. }
  23. }
  24.  
  25. class Contact extends React.Component {
  26. render() {
  27. return(
  28. <div>
  29. <h2>Contact Us</h2>
  30. </div>
  31. );
  32. }
  33. }
  34.  
  35. class BasicExample extends React.Component {
  36. render() {
  37. return(
  38. <BrowserRouter>
  39. <div>
  40. <ul>
  41. <li><Link to="/">Home</Link></li>
  42. <li><Link to="/about">About</Link></li>
  43. <li><Link to="/contact">Contact Us</Link></li>
  44. </ul>
  45.  
  46. <hr/>
  47.  
  48. {/* The exact keyword ensures the '/' route matches only '/' and not '/anything-else'--> */}
  49. <Route exact path="/" component={Home}/>
  50. <Route path="/about" component={About}/>
  51. <Route path="/contact" component={Contact}/>
  52. </div>
  53. </BrowserRouter>
  54. );
  55. }
  56. }
  57.  
  58. ReactDOM.render(
  59. <BasicExample />,
  60. document.getElementById('root')
  61. );
Add Comment
Please, Sign In to add comment