Skip to content

Instantly share code, notes, and snippets.

@park-brian

park-brian/index.html

Created July 17, 2019 00:31
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save park-brian/c8a6603b2f14b8d08cd7ce8520bdacea to your computer and use it in GitHub Desktop.
Save park-brian/c8a6603b2f14b8d08cd7ce8520bdacea to your computer and use it in GitHub Desktop.
Download ZIP
Simple HashRouter
Raw
index.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>GistRun</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div id="root">Loading...</div>
<script nomodule src="https://cdn.jsdelivr.net/combine/npm/babel-polyfill@6.26.0/dist/polyfill.min.js,npm/whatwg-fetch@3.0.0"></script>
<script src="https://cdn.jsdelivr.net/combine/npm/react@16.8.6/umd/react.production.min.js,npm/react-dom@16.8.6/umd/react-dom.production.min.js"></script>
<script src="script.js"></script>
</body>
</html>
Raw
script.js
var root = document.getElementById('root');
var h = React.createElement;
ReactDOM.render(h(App), root);
function App(props) {
var routes = [
{url: '/', component: Hello},
{url: '/goodbye', component: Goodbye},
];
return h(HashRouter, {
routes: routes
});
}
function HashRouter(props) {
var hash = window.location.hash;
var matches = props.routes.filter(function(route) {
return route.url === hash;
});
if (matches.length === 0)
return null;
var match = matches[0];
return h(match.component);
}
function Hello(props) {
return h('div', null, 'Hello from React!');
}
function Goodbye(props) {
return h('div', null, 'Goodbye!');
}
Raw
styles.css
/* todo: add styles */
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment