Guest User

Untitled

a guest
Jan 19th, 2019
127
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 2.19 KB | None | 0 0
  1. Refused to apply style from 'http://localhost:3000/2/main.css' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled.
  2.  
  3. http://localhost:3000/2/app.jsx 404 (Not Found)
  4.  
  5. Uncaught Error: Could not load
  6. http://localhost:3000/2/app.jsx
  7. at XMLHttpRequest.n.onreadystatechange (babel.min.js:24)
  8.  
  9. <!doctype html>
  10. <html lang="en">
  11. <head>
  12. <meta charset="UTF-8">
  13. <meta name="viewport"
  14. content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  15. <meta http-equiv="X-UA-Compatible" content="ie=edge">
  16. <title>Маршруты в React</title>
  17. <script crossorigin src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
  18. <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>
  19. <script src="https://unpkg.com/react-router-dom/umd/react-router-dom.min.js"></script>
  20. <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.25.0/babel.min.js"></script>
  21.  
  22. <link rel="stylesheet" href="main.css">
  23. </head>
  24. <body>
  25. <div id="app"></div>
  26.  
  27. <script src="app.jsx" type="text/babel">
  28.  
  29. </script>
  30. </body>
  31. </html>
  32.  
  33. const Router = ReactRouterDOM.BrowserRouter;
  34. const Route = ReactRouterDOM.Route;
  35. const Switch = ReactRouterDOM.Switch;
  36. const Link = ReactRouterDOM.Link;
  37.  
  38.  
  39. class Home extends React.Component{
  40. render() {
  41. return <div>
  42. <h2>Home</h2>
  43. <p>Match: {JSON.stringify(this.props.match)}</p>
  44. <p>Location: {JSON.stringify(this.props.location)}</p>
  45. <p>Id: {JSON.stringify(this.props.match.params.id)}</p>
  46. <p>Name: {new URLSearchParams(this.props.location.search).get('name')}</p>
  47. <p>Age: {new URLSearchParams(this.props.location.search).get('age')}</p>
  48. </div>
  49. }
  50. }
  51.  
  52. ReactDOM.render(
  53. <Router>
  54. <div>
  55. <nav>
  56. <Link to={"/1/?name=Tigran&age=22"}>Tigran</Link>
  57. <Link to={"/2/?name=Vahag&age=24"}>Vahag</Link>
  58. </nav>
  59. <Switch>
  60. <Route path={'/:id?'} component={Home}/>
  61. </Switch>
  62. </div>
  63. </Router>,
  64. document.getElementById('app')
  65. )
Add Comment
Please, Sign In to add comment