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