Skip to content

Commit 0082376

Browse files
mathieuancelinmathieuancelin
committed
Add historyApiFallback and browserRouter
1 parent e08180c commit 0082376

File tree

18 files changed

+30
-24
lines changed

18 files changed

+30
-24
lines changed

‎step-1/public/index.html

+1-1
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44
<meta charset="UTF-8"/>
55
<title>React Workshop</title>
66
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet" type="text/css">
7-
<link href="./css/main.css" rel="stylesheet" type="text/css">
7+
<link href="/css/main.css" rel="stylesheet" type="text/css">
88
<link rel="icon" type="image/png" href="/img/react.png">
99
</head>
1010
<body>

‎step-2/public/index.html

+1-1
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44
<meta charset="UTF-8"/>
55
<title>React Workshop</title>
66
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet" type="text/css">
7-
<link href="./css/main.css" rel="stylesheet" type="text/css">
7+
<link href="/css/main.css" rel="stylesheet" type="text/css">
88
<link rel="icon" type="image/png" href="/img/react.png">
99
</head>
1010
<body>

‎step-2/webpack.config.js

+1
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,7 @@ module.exports = {
2222
]
2323
},
2424
devServer: {
25+
historyApiFallback: true,
2526
proxy: {
2627
'/api/*': {
2728
target: 'http://localhost:3000'

‎step-3/public/index.html

+2-2
Original file line numberDiff line numberDiff line change
@@ -4,8 +4,8 @@
44
<meta charset="UTF-8"/>
55
<title>React Workshop</title>
66
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet" type="text/css">
7-
<link href="./css/avalanche.css" rel="stylesheet" type="text/css">
8-
<link href="./css/main.css" rel="stylesheet" type="text/css">
7+
<link href="/css/avalanche.css" rel="stylesheet" type="text/css">
8+
<link href="/css/main.css" rel="stylesheet" type="text/css">
99
<link rel="icon" type="image/png" href="/img/react.png">
1010
</head>
1111
<body>

‎step-3/readme.md

+4-4
Original file line numberDiff line numberDiff line change
@@ -131,17 +131,17 @@ npm install --save [email protected]
131131
Maintenant nous pouvons commencer l'intégration du router. Pour ce faire, commençons par lire [l'introduction](https://github.com/reactjs/react-router/blob/master/docs/Introduction.md) à `react-router` puis importons les APIs dans `app.js`
132132

133133
```javascript
134-
import { Router, Route, hashHistory, IndexRoute } from 'react-router';
134+
import { Router, Route, browserhHistory, IndexRoute } from 'react-router';
135135
```
136136

137137
l'initialisation du routeur se fera de la façon suivante :
138138

139139
```javascript
140-
import { Router, Route, hashHistory, IndexRoute } from 'react-router';
140+
import { Router, Route, browserhHistory, IndexRoute } from 'react-router';
141141
import NotFound from './components/not-found';
142142

143143
ReactDOM.render(
144-
<Router history={hashHistory}>
144+
<Router history={browserhHistory}>
145145
<Route path="/" component={???}>
146146
<IndexRoute component={???} />
147147
...
@@ -155,7 +155,7 @@ ReactDOM.render(
155155
Ici nous configurons le routeur pour utiliser les ancres du navigateur comme URL de routage côté client
156156
157157
```javascript
158-
<Router history={hashHistory}> ... </Router>
158+
<Router history={browserhHistory}> ... </Router>
159159
```
160160
161161
puis nous spécifions un container qui aura le role d'afficher la vue courante du router et qui sera le point d'entrée de l'application.

‎step-3/webpack.config.js

+1
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,7 @@ module.exports = {
2222
]
2323
},
2424
devServer: {
25+
historyApiFallback: true,
2526
proxy: {
2627
'/api/*': {
2728
target: 'http://localhost:3000'

‎step-4/public/index.html

+2-2
Original file line numberDiff line numberDiff line change
@@ -4,8 +4,8 @@
44
<meta charset="UTF-8"/>
55
<title>React Workshop</title>
66
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet" type="text/css">
7-
<link href="./css/avalanche.css" rel="stylesheet" type="text/css">
8-
<link href="./css/main.css" rel="stylesheet" type="text/css">
7+
<link href="/css/avalanche.css" rel="stylesheet" type="text/css">
8+
<link href="/css/main.css" rel="stylesheet" type="text/css">
99
<link rel="icon" type="image/png" href="/img/react.png">
1010
</head>
1111
<body>

‎step-4/src/app.js

+2-2
Original file line numberDiff line numberDiff line change
@@ -11,10 +11,10 @@ import { WineListPage } from './components/wine-list';
1111
import { WinePage } from './components/wine';
1212
import { NotFound } from './components/not-found';
1313

14-
import { Router, Route, hashHistory, IndexRoute } from 'react-router';
14+
import { Router, Route, browserhHistory, IndexRoute } from 'react-router';
1515

1616
ReactDOM.render(
17-
<Router history={hashHistory}>
17+
<Router history={browserhHistory}>
1818
<Route path="/" component={WineApp}>
1919
<IndexRoute component={RegionsPage} />
2020
<Route path="regions/:regionId" component={WineListPage} />

‎step-4/webpack.config.js

+1
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,7 @@ module.exports = {
2222
]
2323
},
2424
devServer: {
25+
historyApiFallback: true,
2526
proxy: {
2627
'/api/*': {
2728
target: 'http://localhost:3000'

‎step-5/public/index.html

+2-2
Original file line numberDiff line numberDiff line change
@@ -4,8 +4,8 @@
44
<meta charset="UTF-8"/>
55
<title>React Workshop</title>
66
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet" type="text/css">
7-
<link href="./css/avalanche.css" rel="stylesheet" type="text/css">
8-
<link href="./css/main.css" rel="stylesheet" type="text/css">
7+
<link href="/css/avalanche.css" rel="stylesheet" type="text/css">
8+
<link href="/css/main.css" rel="stylesheet" type="text/css">
99
<link rel="icon" type="image/png" href="/img/react.png">
1010
</head>
1111
<body>

‎step-5/src/app.js

+2-2
Original file line numberDiff line numberDiff line change
@@ -11,10 +11,10 @@ import { WineListPage } from './components/wine-list';
1111
import { WinePage } from './components/wine';
1212
import { NotFound } from './components/not-found';
1313

14-
import { Router, Route, hashHistory, IndexRoute } from 'react-router';
14+
import { Router, Route, browserhHistory, IndexRoute } from 'react-router';
1515

1616
ReactDOM.render(
17-
<Router history={hashHistory}>
17+
<Router history={browserhHistory}>
1818
<Route path="/" component={WineApp}>
1919
<IndexRoute component={RegionsPage} />
2020
<Route path="regions/:regionId" component={WineListPage} />

‎step-5/webpack.config.js

+1
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,7 @@ module.exports = {
2222
]
2323
},
2424
devServer: {
25+
historyApiFallback: true,
2526
proxy: {
2627
'/api/*': {
2728
target: 'http://localhost:3000'

‎step-6/public/index.html

+2-2
Original file line numberDiff line numberDiff line change
@@ -4,8 +4,8 @@
44
<meta charset="UTF-8"/>
55
<title>React Workshop</title>
66
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet" type="text/css">
7-
<link href="./css/avalanche.css" rel="stylesheet" type="text/css">
8-
<link href="./css/main.css" rel="stylesheet" type="text/css">
7+
<link href="/css/avalanche.css" rel="stylesheet" type="text/css">
8+
<link href="/css/main.css" rel="stylesheet" type="text/css">
99
<link rel="icon" type="image/png" href="/img/react.png">
1010
</head>
1111
<body>

‎step-6/src/app.js

+2-2
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@ import { WineListPage } from './components/wine-list';
1111
import { WinePage } from './components/wine';
1212
import { NotFound } from './components/not-found';
1313

14-
import { Router, Route, hashHistory, IndexRoute } from 'react-router';
14+
import { Router, Route, browserhHistory, IndexRoute } from 'react-router';
1515

1616
import { Provider } from 'react-redux';
1717
import { createStore } from 'redux';
@@ -32,7 +32,7 @@ fetch(`/api/comments`)
3232

3333
ReactDOM.render(
3434
<Provider store={store}>
35-
<Router history={hashHistory}>
35+
<Router history={browserhHistory}>
3636
<Route path="/" component={WineApp}>
3737
<IndexRoute component={RegionsPage} />
3838
<Route path="regions/:regionId" component={WineListPage} />

‎step-6/webpack.config.js

+1
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,7 @@ module.exports = {
2222
]
2323
},
2424
devServer: {
25+
historyApiFallback: true,
2526
proxy: {
2627
'/api/*': {
2728
target: 'http://localhost:3000'

‎step-7/public/index.html

+2-2
Original file line numberDiff line numberDiff line change
@@ -4,8 +4,8 @@
44
<meta charset="UTF-8"/>
55
<title>React Workshop</title>
66
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet" type="text/css">
7-
<link href="./css/avalanche.css" rel="stylesheet" type="text/css">
8-
<link href="./css/main.css" rel="stylesheet" type="text/css">
7+
<link href="/css/avalanche.css" rel="stylesheet" type="text/css">
8+
<link href="/css/main.css" rel="stylesheet" type="text/css">
99
<link rel="icon" type="image/png" href="/img/react.png">
1010
</head>
1111
<body>

‎step-7/src/app.js

+2-2
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@ import { WineListPage } from './components/wine-list';
1111
import { WinePage } from './components/wine';
1212
import { NotFound } from './components/not-found';
1313

14-
import { Router, Route, hashHistory, IndexRoute } from 'react-router';
14+
import { Router, Route, browserHistory, IndexRoute } from 'react-router';
1515

1616
import { Provider } from 'react-redux';
1717
import { createStore, applyMiddleware, compose } from 'redux';
@@ -22,7 +22,7 @@ import { fetchLikesCount, fetchCommentsCount } from './actions';
2222
import { DevTools } from './components/devtools';
2323

2424
const store = compose(applyMiddleware(thunk), DevTools.instrument())(createStore)(app);
25-
const history = syncHistoryWithStore(hashHistory, store);
25+
const history = syncHistoryWithStore(browserHistory, store);
2626

2727
store.dispatch(fetchLikesCount());
2828
store.dispatch(fetchCommentsCount());

‎step-7/webpack.config.js

+1
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@ module.exports = {
77
filename: 'bundle.js'
88
},
99
devServer: {
10+
historyApiFallback: true,
1011
proxy: {
1112
'/api/*': {
1213
target: 'http://localhost:3000'

0 commit comments

Comments
 (0)