-
Notifications
You must be signed in to change notification settings - Fork 56
/
index.js
80 lines (72 loc) · 1.98 KB
/
index.js
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
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
import createBrowserRouter from 'found/lib/createBrowserRouter';
import Link from 'found/lib/Link';
import makeRouteConfig from 'found/lib/makeRouteConfig';
import Redirect from 'found/lib/Redirect';
import Route from 'found/lib/Route';
import PropTypes from 'prop-types';
import React from 'react';
import ReactDOM from 'react-dom';
function LinkItem(props) {
return (
<li>
<Link {...props} activeStyle={{ fontWeight: 'bold' }} />
</li>
);
}
const propTypes = {
children: PropTypes.node,
};
function App({ children }) {
return (
<div>
<ul>
<LinkItem to="/">Main</LinkItem>
<ul>
<LinkItem to="/foo">Foo</LinkItem>
<LinkItem to="/bar">Bar (async)</LinkItem>
<LinkItem to="/baz">Baz (redirects to Foo)</LinkItem>
<LinkItem to="/qux">Qux (missing)</LinkItem>
</ul>
</ul>
{children}
</div>
);
}
App.propTypes = propTypes;
const BrowserRouter = createBrowserRouter({
routeConfig: makeRouteConfig(
<Route path="/" Component={App}>
<Route Component={() => <div>Main</div>} />
<Route path="foo" Component={() => <div>Foo</div>} />
<Route
path="bar"
getComponent={() =>
new Promise(resolve => {
setTimeout(resolve, 1000, ({ data }) => <div>{data}</div>);
})
}
getData={() =>
new Promise(resolve => {
setTimeout(resolve, 1000, 'Bar');
})
}
render={({ Component, props }) =>
Component && props ? (
<Component {...props} />
) : (
<div>
<small>Loading…</small>
</div>
)
}
/>
<Redirect from="baz" to="/foo" />
</Route>,
),
/* eslint-disable react/prop-types */
renderError: ({ error }) => (
<div>{error.status === 404 ? 'Not found' : 'Error'}</div>
),
/* eslint-enable react/prop-types */
});
ReactDOM.render(<BrowserRouter />, document.getElementById('root'));