Last active
July 4, 2018 13:15
-
-
Save jizusun/66cf64c0fa559498ae0be2e37af83563 to your computer and use it in GitHub Desktop.
[React Router v3 - Docs - Introduction] React Router// source https://jsbin.com/ludinaj
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta charset="utf-8"> | |
| <title>React Router v3 - Docs - Introduction</title> | |
| <script src="https://unpkg.com/react/umd/react.development.js"></script> | |
| <script src="https://unpkg.com/react-dom/umd/react-dom.development.js"></script> | |
| <!-- Don't use this in production: --> | |
| <script src="https://unpkg.com/[email protected]/babel.min.js"></script> | |
| <script src="https://unpkg.com/react-router@3/umd/ReactRouter.js"></script> | |
| </head> | |
| <body> | |
| <a href="https://github.com/ReactTraining/react-router/blob/v3/docs/Introduction.md">https://github.com/ReactTraining/react-router/blob/v3/docs/Introduction.md</a> | |
| <div id="app"></div> | |
| <script id="jsbin-javascript"> | |
| "use strict"; | |
| var _createClass = (function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; })(); | |
| var _get = function get(_x, _x2, _x3) { var _again = true; _function: while (_again) { var object = _x, property = _x2, receiver = _x3; desc = parent = getter = undefined; _again = false; if (object === null) object = Function.prototype; var desc = Object.getOwnPropertyDescriptor(object, property); if (desc === undefined) { var parent = Object.getPrototypeOf(object); if (parent === null) { return undefined; } else { _x = parent; _x2 = property; _x3 = receiver; _again = true; continue _function; } } else if ("value" in desc) { return desc.value; } else { var getter = desc.get; if (getter === undefined) { return undefined; } return getter.call(receiver); } } }; | |
| function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } | |
| function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; } | |
| var _ReactRouter = ReactRouter; | |
| var Router = _ReactRouter.Router; | |
| var Route = _ReactRouter.Route; | |
| var IndexRoute = _ReactRouter.IndexRoute; | |
| var Redirect = _ReactRouter.Redirect; | |
| var Link = _ReactRouter.Link; | |
| var IndexLink = _ReactRouter.IndexLink; | |
| var hashHistory = _ReactRouter.hashHistory; | |
| var App = (function (_React$Component) { | |
| _inherits(App, _React$Component); | |
| function App() { | |
| _classCallCheck(this, App); | |
| _get(Object.getPrototypeOf(App.prototype), "constructor", this).apply(this, arguments); | |
| } | |
| _createClass(App, [{ | |
| key: "render", | |
| value: function render() { | |
| return React.createElement( | |
| "div", | |
| null, | |
| React.createElement( | |
| "h1", | |
| null, | |
| "App" | |
| ), | |
| React.createElement( | |
| "ul", | |
| null, | |
| React.createElement( | |
| "li", | |
| null, | |
| React.createElement( | |
| Link, | |
| { to: "/about" }, | |
| "About" | |
| ) | |
| ), | |
| React.createElement( | |
| "li", | |
| null, | |
| React.createElement( | |
| Link, | |
| { to: "/inbox" }, | |
| "Inbox" | |
| ) | |
| ) | |
| ), | |
| this.props.children | |
| ); | |
| } | |
| }]); | |
| return App; | |
| })(React.Component); | |
| var Inbox = (function (_React$Component2) { | |
| _inherits(Inbox, _React$Component2); | |
| function Inbox(props) { | |
| _classCallCheck(this, Inbox); | |
| _get(Object.getPrototypeOf(Inbox.prototype), "constructor", this).call(this, props); | |
| } | |
| _createClass(Inbox, [{ | |
| key: "render", | |
| value: function render() { | |
| return React.createElement( | |
| "div", | |
| null, | |
| React.createElement( | |
| "h2", | |
| null, | |
| "Inbox" | |
| ), | |
| this.props.children | |
| ); | |
| } | |
| }]); | |
| return Inbox; | |
| })(React.Component); | |
| var Home = function Home() { | |
| return React.createElement( | |
| "h3", | |
| null, | |
| " Home " | |
| ); | |
| }; | |
| var About = function About() { | |
| return React.createElement( | |
| "h3", | |
| null, | |
| " About " | |
| ); | |
| }; | |
| ReactDOM.render(React.createElement( | |
| Router, | |
| { history: hashHistory }, | |
| React.createElement( | |
| Route, | |
| { path: "/", component: App }, | |
| React.createElement(IndexRoute, { component: Home }), | |
| React.createElement(Route, { path: "about", component: About }), | |
| React.createElement(Route, { path: "inbox", component: Inbox }) | |
| ) | |
| ), document.getElementById('app')); | |
| </script> | |
| <script id="jsbin-source-javascript" type="text/javascript">const { | |
| Router, | |
| Route, | |
| IndexRoute, | |
| Redirect, | |
| Link, | |
| IndexLink, | |
| hashHistory | |
| } = ReactRouter | |
| class App extends React.Component { | |
| render() { | |
| return ( | |
| <div> | |
| <h1>App</h1> | |
| <ul> | |
| <li><Link to="/about">About</Link></li> | |
| <li><Link to="/inbox">Inbox</Link></li> | |
| </ul> | |
| {this.props.children} | |
| </div> | |
| ) | |
| } | |
| } | |
| class Inbox extends React.Component { | |
| constructor(props) { | |
| super(props); | |
| } | |
| render() { | |
| return ( | |
| <div> | |
| <h2>Inbox</h2> | |
| {this.props.children} | |
| </div> | |
| ) | |
| } | |
| } | |
| const Home = () => ( | |
| <h3> Home </h3> | |
| ) | |
| const About = () => ( | |
| <h3> About </h3> | |
| ) | |
| ReactDOM.render(( | |
| <Router history={hashHistory}> | |
| <Route path="/" component={App}> | |
| <IndexRoute component={Home} /> | |
| <Route path="about" component={About} /> | |
| <Route path="inbox" component={Inbox} /> | |
| </Route> | |
| </Router> | |
| ), document.getElementById('app')) | |
| </script></body> | |
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| "use strict"; | |
| var _createClass = (function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; })(); | |
| var _get = function get(_x, _x2, _x3) { var _again = true; _function: while (_again) { var object = _x, property = _x2, receiver = _x3; desc = parent = getter = undefined; _again = false; if (object === null) object = Function.prototype; var desc = Object.getOwnPropertyDescriptor(object, property); if (desc === undefined) { var parent = Object.getPrototypeOf(object); if (parent === null) { return undefined; } else { _x = parent; _x2 = property; _x3 = receiver; _again = true; continue _function; } } else if ("value" in desc) { return desc.value; } else { var getter = desc.get; if (getter === undefined) { return undefined; } return getter.call(receiver); } } }; | |
| function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } | |
| function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; } | |
| var _ReactRouter = ReactRouter; | |
| var Router = _ReactRouter.Router; | |
| var Route = _ReactRouter.Route; | |
| var IndexRoute = _ReactRouter.IndexRoute; | |
| var Redirect = _ReactRouter.Redirect; | |
| var Link = _ReactRouter.Link; | |
| var IndexLink = _ReactRouter.IndexLink; | |
| var hashHistory = _ReactRouter.hashHistory; | |
| var App = (function (_React$Component) { | |
| _inherits(App, _React$Component); | |
| function App() { | |
| _classCallCheck(this, App); | |
| _get(Object.getPrototypeOf(App.prototype), "constructor", this).apply(this, arguments); | |
| } | |
| _createClass(App, [{ | |
| key: "render", | |
| value: function render() { | |
| return React.createElement( | |
| "div", | |
| null, | |
| React.createElement( | |
| "h1", | |
| null, | |
| "App" | |
| ), | |
| React.createElement( | |
| "ul", | |
| null, | |
| React.createElement( | |
| "li", | |
| null, | |
| React.createElement( | |
| Link, | |
| { to: "/about" }, | |
| "About" | |
| ) | |
| ), | |
| React.createElement( | |
| "li", | |
| null, | |
| React.createElement( | |
| Link, | |
| { to: "/inbox" }, | |
| "Inbox" | |
| ) | |
| ) | |
| ), | |
| this.props.children | |
| ); | |
| } | |
| }]); | |
| return App; | |
| })(React.Component); | |
| var Inbox = (function (_React$Component2) { | |
| _inherits(Inbox, _React$Component2); | |
| function Inbox(props) { | |
| _classCallCheck(this, Inbox); | |
| _get(Object.getPrototypeOf(Inbox.prototype), "constructor", this).call(this, props); | |
| } | |
| _createClass(Inbox, [{ | |
| key: "render", | |
| value: function render() { | |
| return React.createElement( | |
| "div", | |
| null, | |
| React.createElement( | |
| "h2", | |
| null, | |
| "Inbox" | |
| ), | |
| this.props.children | |
| ); | |
| } | |
| }]); | |
| return Inbox; | |
| })(React.Component); | |
| var Home = function Home() { | |
| return React.createElement( | |
| "h3", | |
| null, | |
| " Home " | |
| ); | |
| }; | |
| var About = function About() { | |
| return React.createElement( | |
| "h3", | |
| null, | |
| " About " | |
| ); | |
| }; | |
| ReactDOM.render(React.createElement( | |
| Router, | |
| { history: hashHistory }, | |
| React.createElement( | |
| Route, | |
| { path: "/", component: App }, | |
| React.createElement(IndexRoute, { component: Home }), | |
| React.createElement(Route, { path: "about", component: About }), | |
| React.createElement(Route, { path: "inbox", component: Inbox }) | |
| ) | |
| ), document.getElementById('app')); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment