fallback navigation to root

Author: Miguel Angel Chimali Cobano

04-frameworks/01-react/04-basic-app/01-routing/readme.md

@@ -82,9 +82,14 @@ export const DetailPage: React.FC = () => {
 
 _./src/app.tsx_
 
-```diff
-import React from "react";
-+ import { HashRouter, Routes, Route } from "react-router-dom";
+````diff
++ import React from "react";
++ import {
++  BrowserRouter as Router,
++  Routes,
++  Route,
++  Navigate,
++ } from "react-router-dom";
 + import {LoginPage} from './login';
 + import {ListPage} from './list';
 + import {DetailPage} from './detail';
@@ -98,17 +103,17 @@ export const App = () => {
 +       <Route path="/" element={<LoginPage/>} />
 +       <Route path="/list" element={<ListPage/>} />
 +       <Route path="/detail" element={<DetailPage/>} />
++       <Route path="*" element={<Navigate to="/" />} />
 +     </Routes>
 +   </HashRouter>
 + );
 };
-```
 
 - Let's run and see what happens (we can navigate by typing in the url of the browser):
 
 ```bash
 npm start
-```
+````
 
 - Navigating by typing the url is fine but the normal thing to do is to click on links or buttons,
   so let's go for it.

04-frameworks/01-react/04-basic-app/01-routing/readme_es.md

@@ -84,8 +84,13 @@ export const DetailPage: React.FC = () => {
 _./src/app.tsx_
 
 ```diff
-import React from "react";
-+ import { HashRouter, Routes, Route } from "react-router-dom";
++ import React from "react";
++ import {
++  BrowserRouter as Router,
++  Routes,
++  Route,
++  Navigate,
++ } from "react-router-dom";
 + import {LoginPage} from './login';
 + import {ListPage} from './list';
 + import {DetailPage} from './detail';
@@ -99,6 +104,7 @@ export const App = () => {
 +       <Route path="/" element={<LoginPage/>} />
 +       <Route path="/list" element={<ListPage/>} />
 +       <Route path="/detail" element={<DetailPage/>} />
++       <Route path="*" element={<Navigate to="/" />} />
 +     </Routes>
 +   </HashRouter>
 + );

04-frameworks/01-react/04-basic-app/01-routing/src/app.tsx

@@ -1,5 +1,10 @@
 import React from "react";
-import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
+import {
+  BrowserRouter as Router,
+  Routes,
+  Route,
+  Navigate,
+} from "react-router-dom";
 import { LoginPage } from "./login";
 import { ListPage } from "./list";
 import { DetailPage } from "./detail";
@@ -11,6 +16,7 @@ export const App = () => {
         <Route path="/" element={<LoginPage />} />
         <Route path="/list" element={<ListPage />} />
         <Route path="/detail" element={<DetailPage />} />
+        <Route path="*" element={<Navigate to="/" />} />
       </Routes>
     </Router>
   );

04-frameworks/01-react/04-basic-app/02-login/src/app.tsx

@@ -1,5 +1,10 @@
 import React from "react";
-import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
+import {
+  BrowserRouter as Router,
+  Routes,
+  Route,
+  Navigate,
+} from "react-router-dom";
 import { LoginPage } from "./login";
 import { ListPage } from "./list";
 import { DetailPage } from "./detail";
@@ -11,6 +16,7 @@ export const App = () => {
         <Route path="/" element={<LoginPage />} />
         <Route path="/list" element={<ListPage />} />
         <Route path="/detail" element={<DetailPage />} />
+        <Route path="*" element={<Navigate to="/" />} />
       </Routes>
     </Router>
   );

04-frameworks/01-react/04-basic-app/03-list/src/app.tsx

@@ -1,5 +1,10 @@
 import React from "react";
-import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
+import {
+  BrowserRouter as Router,
+  Routes,
+  Route,
+  Navigate,
+} from "react-router-dom";
 import { LoginPage } from "./login";
 import { ListPage } from "./list";
 import { DetailPage } from "./detail";
@@ -11,6 +16,7 @@ export const App = () => {
         <Route path="/" element={<LoginPage />} />
         <Route path="/list" element={<ListPage />} />
         <Route path="/detail/:id" element={<DetailPage />} />
+        <Route path="*" element={<Navigate to="/" />} />
       </Routes>
     </Router>
   );

04-frameworks/01-react/04-basic-app/04-detail/src/app.tsx

@@ -1,5 +1,10 @@
 import React from "react";
-import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
+import {
+  BrowserRouter as Router,
+  Routes,
+  Route,
+  Navigate,
+} from "react-router-dom";
 import { LoginPage } from "./login";
 import { ListPage } from "./list";
 import { DetailPage } from "./detail";
@@ -11,6 +16,7 @@ export const App = () => {
         <Route path="/" element={<LoginPage />} />
         <Route path="/list" element={<ListPage />} />
         <Route path="/detail/:id" element={<DetailPage />} />
+        <Route path="*" element={<Navigate to="/" />} />
       </Routes>
     </Router>
   );

04-frameworks/01-react/04-basic-app/04-detail/src/list.tsx

@@ -18,7 +18,7 @@ export const ListPage: React.FC = () => {
 
   return (
     <>
-      <h2>Hello from List page</h2>+{" "}
+      <h2>Hello from List page</h2>
       <div className="list-user-list-container">
         <span className="list-header">Avatar</span>
         <span className="list-header">Id</span>