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 render1 = (Component) => {
|
16 | ReactDOM.render(
|
17 | <Router>
|
18 | <div>
|
19 | <AppContainer>
|
20 | <Component/>
|
21 | </AppContainer>
|
22 | <Route path="/about" component={About}/>
|
23 | <Route path="/topics" component={Topics}/>
|
24 | </div>
|
25 | </Router>
|
26 | ,
|
27 | document.getElementById('root')
|
28 | );
|
29 | };
|
30 |
|
31 | const Home = () => (
|
32 | <div>
|
33 | <h2>Home</h2>
|
34 | </div>
|
35 | )
|
36 |
|
37 | const About = () => (
|
38 | <div>
|
39 | <h2>About</h2>
|
40 | </div>
|
41 | )
|
42 |
|
43 | const Topic = ({ match }) => (
|
44 | <div>
|
45 | <h3>{match.params.topicId}</h3>
|
46 | </div>
|
47 | )
|
48 |
|
49 | const Topics = ({ match }) => (
|
50 | <div>
|
51 | <h2>Topics</h2>
|
52 | <ul>
|
53 | <li>
|
54 | <Link to={`${match.url}/rendering`}>
|
55 | Rendering with React
|
56 | </Link>
|
57 | </li>
|
58 | <li>
|
59 | <Link to={`${match.url}/components`}>
|
60 | Components
|
61 | </Link>
|
62 | </li>
|
63 | <li>
|
64 | <Link to={`${match.url}/props-v-state`}>
|
65 | Props v. State
|
66 | </Link>
|
67 | </li>
|
68 | </ul>
|
69 |
|
70 | <Route path={`${match.url}/:topicId`} component={Topic}/>
|
71 | <Route exact path={match.url} render={() => (
|
72 | <h3>Please select a topic.</h3>
|
73 | )}/>
|
74 | </div>
|
75 | )
|
76 |
|
77 | const BasicExample = () => (
|
78 | <Router>
|
79 | <div>
|
80 | <ul>
|
81 | <li><Link to="/">Home</Link></li>
|
82 | <li><Link to="/about">About</Link></li>
|
83 | <li><Link to="/topics">Topics</Link></li>
|
84 | </ul>
|
85 |
|
86 | <hr/>
|
87 | <AppContainer>
|
88 | <Component/>
|
89 | </AppContainer>
|
90 |
|
91 | <Route exact path="/" component={Home}/>
|
92 | <Route path="/about" component={About}/>
|
93 | <Route path="/topics" component={Topics}/>
|
94 | </div>
|
95 | </Router>
|
96 | )
|
97 |
|
98 | const render = (comp) => {
|
99 | ReactDOM.render(<BasicExample/>, document.getElementById('root'));
|
100 | }
|
101 |
|
102 |
|
103 |
|
104 |
|
105 | render(App);
|
106 |
|
107 |
|
108 |
|
109 | if (module.hot) {
|
110 | module.hot.accept('./App', () => {
|
111 | render(App)
|
112 | });
|
113 | } |
\ | No newline at end of file |