Skip to content

Instantly share code, notes, and snippets.

@i5ar

i5ar/index.html

Created April 10, 2020 19:30
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 i5ar/2a6a4abdc396707bd5ac8ac46a6eddd3 to your computer and use it in GitHub Desktop.
Save i5ar/2a6a4abdc396707bd5ac8ac46a6eddd3 to your computer and use it in GitHub Desktop.
Download ZIP
Basic Routing with React Router
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Basic Routing</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 crossorigin src="https://unpkg.com/react-router-dom@5.1.2/umd/react-router-dom.min.js"></script>
</head>
<body>
<main id="root"></main>
<script>
const e = React.createElement;
const f = React.Fragment;
const b = ReactRouterDOM.BrowserRouter;
const h = ReactRouterDOM.HashRouter;
const s = ReactRouterDOM.Switch;
const r = ReactRouterDOM.Route;
const l = ReactRouterDOM.Link;
</script>
<script src="main.mjs" type="module"></script>
</body>
</html>
Raw
main.mjs
class Root extends React.Component {
render() {
return e(
h,
{},
e(
"div",
{},
e(
"nav",
{},
e(
"ul",
{},
e("li", {}, e(l, {to: "/"}, "Home")),
e("li", {}, e(l, {to: "/about"}, "About")),
e("li", {}, e(l, {to: "/users"}, "Users")),
)
),
e(
s,
{},
e(r, {path: "/about"}, e("h2", {}, "About")),
e(r, {path: "/users"}, e("h2", {}, "Users")),
e(r, {path: "/"}, e("h2", {}, "Home"))
)
)
)
}
}
ReactDOM.render(e(Root), document.querySelector("#root"));
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment