40reach 2frouter

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