1 | import React from 'react';
|
2 | import ReactDOM from 'react-dom';
|
3 |
|
4 | import { AppContainer } from 'react-hot-loader';
|
5 |
|
6 |
|
7 | import {
|
8 | BrowserRouter as Router,
|
9 | Route,
|
10 | Link
|
11 | } from 'react-router-dom';
|
12 |
|
13 | import App from './App';
|
14 |
|
15 | const Home = () => (
|
16 | <div>
|
17 | <h2>Home</h2>
|
18 | </div>
|
19 | )
|
20 |
|
21 | const About = () => (
|
22 | <div>
|
23 | <h2>About</h2>
|
24 | </div>
|
25 | )
|
26 |
|
27 | const Topic = ({ match }) => (
|
28 | <div>
|
29 | <h3>{match.params.topicId}</h3>
|
30 | </div>
|
31 | )
|
32 |
|
33 | const Topics = ({ match }) => (
|
34 | <div>
|
35 | <h2>Topics</h2>
|
36 | <ul>
|
37 | <li>
|
38 | <Link to={`${match.url}/rendering`}>
|
39 | Rendering with React
|
40 | </Link>
|
41 | </li>
|
42 | <li>
|
43 | <Link to={`${match.url}/components`}>
|
44 | Components
|
45 | </Link>
|
46 | </li>
|
47 | <li>
|
48 | <Link to={`${match.url}/props-v-state`}>
|
49 | Props v. State
|
50 | </Link>
|
51 | </li>
|
52 | </ul>
|
53 |
|
54 | <Route path={`${match.url}/:topicId`} component={Topic}/>
|
55 | <Route exact path={match.url} render={() => (
|
56 | <h3>Please select a topic.</h3>
|
57 | )}/>
|
58 | </div>
|
59 | )
|
60 |
|
61 | const BasicExample = () => (
|
62 | <Router>
|
63 | <div>
|
64 | <ul>
|
65 | <li><Link to="/">Home</Link></li>
|
66 | <li><Link to="/about">About</Link></li>
|
67 | <li><Link to="/topics">Topics</Link></li>
|
68 | </ul>
|
69 |
|
70 | <hr/>
|
71 | <App />
|
72 | <Route exact path="/" component={Home}/>
|
73 | <Route path="/about" component={About}/>
|
74 | <Route path="/topics" component={Topics}/>
|
75 | </div>
|
76 | </Router>
|
77 | )
|
78 |
|
79 | const render = (comp) => {
|
80 | ReactDOM.render(<BasicExample/>, document.getElementById('root'));
|
81 | }
|
82 |
|
83 |
|
84 |
|
85 |
|
86 | render(App);
|
87 |
|
88 |
|
89 |
|
90 | if (module.hot) {
|
91 | module.hot.accept('./App', () => {
|
92 | render(App)
|
93 | });
|
94 | } |
\ | No newline at end of file |