1import React from "react"
2import { render } from "react-dom"
3import { Router, Link } from "@reach/router"
4
5let Home = () => <div>Home</div>
6let Dash = () => <div>Dash</div>
7
8render(
9 <Router>
10 <Home path="/" />
11 <Dash path="dashboard" />
12 </Router>
13)
14
1render(
2 <Router>
3 <Home path="/" />
4 <Invoice path=":invoiceId" />
5 <InvoiceList path="invoices" />
6 </Router>
7)
8
1render(
2 <Router>
3 <Home path="/" />
4 <Dash path="dashboard">
5 <Invoices path="invoices" />
6 <Team path="team" />
7 </Dash>
8 </Router>
9)
10
11const Dash = ({ children }) => (
12 <div>
13 <h1>Dashboard</h1>
14 <nav>
15 <Link to="invoices">Invoices</Link>{" "}
16 <Link to="team">Team</Link>
17 </nav>
18 <hr />
19 {children}
20 </div>
21)
22
1const Dash = ({ children }) => (
2 <div>
3 <h1>Dashboard</h1>
4 <hr />
5 {children}
6 </div>
7)
8
9render(
10 <Router>
11 <Home path="/" />
12 <Dash path="dashboard">
13 <Invoices path="invoices" />
14 <Team path="team" />
15 </Dash>
16 </Router>
17)
18
1const Main = ({ children }) => (
2 <div>
3 <h1>Welcome to the App!</h1>
4 <ul>
5 <li>
6 <Link to="dashboard">Dashboard</Link>
7 </li>
8 <li>
9 <Link to="invoices">Invoices</Link>
10 </li>
11 </ul>
12 <hr />
13 {children}
14 </div>
15)
16
17render(
18 <Router>
19 <Main path="/">
20 <Invoices path="invoices" />
21 <Dash path="dashboard" />
22 </Main>
23 </Router>
24)
25