@@ -49,8 +49,8 @@ Let's get started.
49
49
50
50
#### Change Overview
51
51
52
- 1 . You do NOT need to use exact anymore!
53
- 2 . You should use element={<LoginComponent />} instead of component=LoginComponent
52
+ 1 . You do NOT need to use ` exact ` anymore!
53
+ 2 . You should use ` element={<LoginComponent />} ` instead of ` component=LoginComponent `
54
54
55
55
#### Final Code for TodoApp
56
56
@@ -96,7 +96,7 @@ export default withNavigation
96
96
97
97
##### Change 2: Use LoginComponentWithNavigation instead of LoginComponent
98
98
99
- Use LoginComponentWithNavigation instead of LoginComponent
99
+ Use ` LoginComponentWithNavigation ` instead of ` LoginComponent `
100
100
101
101
```
102
102
const LoginComponentWithNavigation = withNavigation(LoginComponent);
@@ -145,8 +145,8 @@ class TodoApp extends Component {
145
145
146
146
#### Change Overview
147
147
148
- 1 . No need to use a Switch
149
- 2 . Use <Route path="* " element={<ErrorComponent />} />
148
+ 1 . No need to use a ` Switch `
149
+ 2 . Use ` <Route path="*" element={<ErrorComponent />} /> `
150
150
151
151
152
152
```
@@ -402,20 +402,15 @@ export default TodoApp
402
402
403
403
##### Change 1: Use HeaderComponentWithNavigation instead of HeaderComponent
404
404
405
- render() method in TodoApp
406
- ```
407
- const HeaderComponentWithNavigation = withNavigation(HeaderComponent);
408
-
405
+ ` render() ` method in ` TodoApp `
409
406
```
407
+ const HeaderComponentWithNavigation = withNavigation(HeaderComponent);
410
408
411
- render() method in TodoApp
412
- ```
413
409
<HeaderComponentWithNavigation/>
414
410
//<HeaderComponent/>
415
411
```
416
412
417
413
418
-
419
414
##### TodoApp after this step
420
415
421
416
```
@@ -492,7 +487,7 @@ export default AuthenticatedRoute
492
487
493
488
##### Change 3: Usage of AuthenticatedRoute
494
489
495
- Use AuthenticatedRoute inside the element attribute
490
+ Use ` AuthenticatedRoute ` inside the ` element ` attribute
496
491
497
492
```
498
493
//<AuthenticatedRoute path="/welcome/:name" component={WelcomeComponent}/> //REACT-5
@@ -531,3 +526,8 @@ Use AuthenticatedRoute inside the element attribute
531
526
} />
532
527
533
528
```
529
+
530
+ ## End of this section
531
+ - Code Backups
532
+ - [ Before Refactoring] ( https://github.com/in28minutes/full-stack-with-react-and-spring-boot/blob/master/00000-react-6-updates/react-6-01-single-component-for-all.md )
533
+ - [ After Refactoring] ( https://github.com/in28minutes/full-stack-with-react-and-spring-boot/blob/master/00000-react-6-updates/react-6-02-after-refactoring.md )
0 commit comments