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