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
diff --git a/LICENSE.txt b/LICENSE.txt
new file mode 100644
index 0000000..111ad91
--- /dev/null
+++ b/LICENSE.txt
@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2023 Asabeneh
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
\ No newline at end of file