-
Notifications
You must be signed in to change notification settings - Fork 0
/
App.tsx
executable file
·36 lines (32 loc) · 970 Bytes
/
App.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
import * as React from 'react';
import { Link, Router, LinkProps } from '@reach/router';
import { Button } from '@material-ui/core';
import { ButtonProps } from '@material-ui/core/Button';
const Hello: React.FC<{ path: string }> = () => <h1>Hello!</h1>;
const Dashboard: React.FC<{ path: string }> = () => <h1>Dashboard</h1>;
type ComponentWorkaroundProps<P extends {}> = P & {
component?: React.ComponentType<P>;
};
const MyButton = React.forwardRef<
HTMLButtonElement,
Omit<ButtonProps, 'component'> & ComponentWorkaroundProps<LinkProps<void>>
>((props, ref) => {
return <Button variant="contained" {...props} ref={ref} />;
});
export const App = () => (
<div>
<nav>
<MyButton component={Link} to="/">
Home
</MyButton>
{' | '}
<MyButton component={Link} to="dashboard">
Dashboard
</MyButton>
</nav>
<Router>
<Hello path="/" />
<Dashboard path="dashboard" />
</Router>
</div>
);