Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- 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.
- http://localhost:3000/2/app.jsx 404 (Not Found)
- Uncaught Error: Could not load
- http://localhost:3000/2/app.jsx
- at XMLHttpRequest.n.onreadystatechange (babel.min.js:24)
- <!doctype html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <meta name="viewport"
- content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
- <meta http-equiv="X-UA-Compatible" content="ie=edge">
- <title>Маршруты в React</title>
- <script crossorigin src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
- <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>
- <script src="https://unpkg.com/react-router-dom/umd/react-router-dom.min.js"></script>
- <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.25.0/babel.min.js"></script>
- <link rel="stylesheet" href="main.css">
- </head>
- <body>
- <div id="app"></div>
- <script src="app.jsx" type="text/babel">
- </script>
- </body>
- </html>
- const Router = ReactRouterDOM.BrowserRouter;
- const Route = ReactRouterDOM.Route;
- const Switch = ReactRouterDOM.Switch;
- const Link = ReactRouterDOM.Link;
- class Home extends React.Component{
- render() {
- return <div>
- <h2>Home</h2>
- <p>Match: {JSON.stringify(this.props.match)}</p>
- <p>Location: {JSON.stringify(this.props.location)}</p>
- <p>Id: {JSON.stringify(this.props.match.params.id)}</p>
- <p>Name: {new URLSearchParams(this.props.location.search).get('name')}</p>
- <p>Age: {new URLSearchParams(this.props.location.search).get('age')}</p>
- </div>
- }
- }
- ReactDOM.render(
- <Router>
- <div>
- <nav>
- <Link to={"/1/?name=Tigran&age=22"}>Tigran</Link>
- <Link to={"/2/?name=Vahag&age=24"}>Vahag</Link>
- </nav>
- <Switch>
- <Route path={'/:id?'} component={Home}/>
- </Switch>
- </div>
- </Router>,
- document.getElementById('app')
- )
Add Comment
Please, Sign In to add comment