diff --git a/17_React_Router/17_react_router.md b/17_React_Router/17_react_router.md
index 6175f0f..c07b46d 100644
--- a/17_React_Router/17_react_router.md
+++ b/17_React_Router/17_react_router.md
@@ -22,7 +22,7 @@
- [What is React Router ?](#what-is-react-router-)
- [BroswerRouter](#broswerrouter)
- [Route](#route)
- - [Switch](#switch)
+ - [Routes](#Routes)
- [NavLink](#navlink)
- [Nested Routing](#nested-routing)
- [Redirect](#redirect)
@@ -54,7 +54,7 @@ import {
BrowserRouter,
Route,
NavLink,
- Switch,
+ Routes,
Redirect,
Prompt,
withRouter,
@@ -116,7 +116,7 @@ class App extends Component {
return (
-
+ } />
)
@@ -152,10 +152,10 @@ class App extends Component {
return (
-
-
-
-
+ } />
+ } />
+ } />
+ } />
)
@@ -191,10 +191,10 @@ class App extends Component {
return (
-
-
-
-
+ } />
+ } />
+ } />
+ } />
)
@@ -230,10 +230,10 @@ class App extends Component {
return (
-
-
-
-
+ } />
+ } />
+ } />
+ } />
)
@@ -269,10 +269,10 @@ class App extends Component {
return (
-
-
-
-
+ } />
+ } />
+ } />
+ } />
)
@@ -283,16 +283,16 @@ const rootElement = document.getElementById('root')
ReactDOM.render(, rootElement)
```
-The other way to avoid the lingering home page is rearranging the routing order and Switch component. Just putting the home route at the bottom.
+The other way to avoid the lingering home page is rearranging the routing order and Routes component. Just putting the home route at the bottom.
-## Switch
+## Routes
-The Switch component allows only on component to be rendered.
+The Routes component allows only on component to be rendered.
```js
import React, { Component } from 'react'
import ReactDOM from 'react-dom'
-import { BrowserRouter as Router, Route, Switch } from 'react-router-dom'
+import { BrowserRouter as Router, Route, Routes } from 'react-router-dom'
// Home component
const Home = (props) =>
Welcome Home
@@ -312,12 +312,12 @@ class App extends Component {
return (
-
-
-
-
-
-
+
+ } />
+ } />
+ } />
+ } />
+
)
@@ -340,7 +340,7 @@ import ReactDOM from 'react-dom'
import {
BrowserRouter as Router,
Route,
- Switch,
+ Routes,
NavLink,
} from 'react-router-dom'
@@ -368,12 +368,12 @@ class App extends Component {
-
-
-
-
-
-
+
+ } />
+ } />
+ } />
+ } />
+
)
@@ -392,7 +392,7 @@ import ReactDOM from 'react-dom'
import {
BrowserRouter as Router,
Route,
- Switch,
+ Routes,
NavLink,
} from 'react-router-dom'
@@ -429,12 +429,12 @@ class App extends Component {
-
-
-
-
-
-
+
+ } />
+ } />
+ } />
+ } />
+
)
@@ -453,7 +453,7 @@ import ReactDOM from 'react-dom'
import {
BrowserRouter as Router,
Route,
- Switch,
+ Routes,
NavLink,
} from 'react-router-dom'
@@ -490,13 +490,13 @@ class App extends Component {
-
-
-
-
-
+
+ } />
+ } />
+ } />
+ } />
-
+
)
@@ -515,7 +515,7 @@ import ReactDOM from 'react-dom'
import {
BrowserRouter as Router,
Route,
- Switch,
+ Routes,
NavLink,
} from 'react-router-dom'
@@ -554,13 +554,13 @@ class App extends Component {
-
+
-
-
-
-
-
+ } />
+ } />
+ } />
+ } />
+
)
@@ -581,7 +581,7 @@ import ReactDOM from 'react-dom'
import {
BrowserRouter as Router,
Route,
- Switch,
+ Routes,
NavLink,
} from 'react-router-dom'
@@ -747,7 +747,7 @@ const Challenges = (props) => {
))}
-
+
{
path={path}
component={(props) => }
/>
-
+
)
}
@@ -785,13 +785,13 @@ class App extends Component {
-
-
-
-
-
+
+ } />
+ } />
+ } />
+ } />
-
+
)
@@ -814,7 +814,7 @@ import ReactDOM from 'react-dom'
import {
BrowserRouter as Router,
Route,
- Switch,
+ Routes,
NavLink,
Redirect,
} from 'react-router-dom'
@@ -981,7 +981,7 @@ const Challenges = (props) => {
))}
-
+
{
path={path}
component={(props) => }
/>
-
+
)
}
@@ -1057,9 +1057,9 @@ class App extends Component {
-
-
-
+
+ } />
+ } />
(
@@ -1090,9 +1090,9 @@ class App extends Component {
)
}}
/>
-
+ } />
-
+
)
@@ -1115,7 +1115,7 @@ import ReactDOM from 'react-dom'
import {
BrowserRouter as Router,
Route,
- Switch,
+ Routes,
NavLink,
Redirect,
Prompt,
@@ -1283,7 +1283,7 @@ const Challenges = (props) => {
))}
-
+
{
path={path}
component={(props) => }
/>
-
+
)
}
@@ -1361,9 +1361,9 @@ class App extends Component {
-
-
-
+
+ } />
+ } />
(
@@ -1394,9 +1394,9 @@ class App extends Component {
)
}}
/>
-
+ } />
-
+
)
@@ -1415,7 +1415,7 @@ import ReactDOM from 'react-dom'
import {
BrowserRouter as Router,
Route,
- Switch,
+ Routes,
NavLink,
Redirect,
Prompt,
@@ -1583,7 +1583,7 @@ const Challenges = (props) => {
))}
-
+
{
path={path}
component={(props) => }
/>
-
+
)
}
@@ -1669,9 +1669,9 @@ class App extends Component {
}}
/>
-
-
-
+
+ } />
+ } />
(
@@ -1702,9 +1702,9 @@ class App extends Component {
)
}}
/>
-
+ } />
-
+
)
@@ -1721,7 +1721,7 @@ ReactDOM.render(, rootElement)
1. What package do you use to implement routing in react?
2. What is the default export in react-router-dom?
-3. What is the use of the following Components(Route, NavLink, Switch, Redirect, Prompt)
+3. What is the use of the following Components(Route, NavLink, Routes, Redirect, Prompt)
## Exercises: Level 2