Navegación entre rutas

Muy importante, a partir de las mas nuevas versiones de ‘react-router-dom’ el Switch fue cambiado por ‘Routes’ entonces el import quedaria asi"

import { BrowserRouter, Routes, Route } from 'react-router-dom';

Tambien en vez de "component en el atributo de Route, ahora es “element” y se le pasa el elemento, la estructura asi:

<BrowserRouter>
	<Layout>
		<Routes>
			<Route exact path="/" element={<Home />} />
			<Route exact path="/login" element={<Login />} />			<Route exact path="/recovery-password" element={<RecoveryPassword />} />
			<Route path="*" element={<NotFound />} />
		</Routes>
	</Layout>
</BrowserRouter> 

Para los que instalaron react-router-dom version 6 el código quedaría así

Aquí mi página de error 404

Así quedó mi pagina de error 🤗

Si no te funciona, revisa tu package.json, busca el objeto dependencies y dentro react-router-dom, ahí viene la versión de la librería que instalaste, en mi caso es:

"react-router-dom": "^6.2.1",

Cambios a partir de la versión 6:

• Switch deja de funcionar, se sustituye por Routes, cambialo en tu import y en el wrapper:

  //Cambia el import:
  import { BrowserRouter, Routes, Route } from "react-router-dom";
  //Wrapper:
      <Routes>
      		<Route path="/" element={<Home />} /> 	  	
  	</Routes>
  

• Se elimina el uso del atributo exact y se sutituye el atributo component por element.
  element recibe la sintaxis de componente, no solo su nombre.

  //Con exact y component:
  <Route exact path="/" component={Home} />
  //Con element:
  <Route path="/" element={<Home />} /> 
  

• No match: Debe recibir * como path.

       	<Route path="*" element={<NotFound />} />
  

Les dejo el código completo:

import React from "react";
import "../styles/global.css";

import { BrowserRouter, Routes, Route } from "react-router-dom";

import Layout from "../containers/Layout";
import Login from "../containers/Login";
import RecoveryPassword from "../containers/RecoveryPassword";
import Home from "../pages/Home";
import NotFound from "../pages/NotFound";

const App = () => {
  return (
    <BrowserRouter>
    	<Layout>
        	<Routes>
         		 <Route path="/" element={<Home />} />
          		<Route path="/login" element={<Login />} />
         		 <Route path="/recovery-password" element={<RecoveryPassword />} />
          		<Route path="*" element={<NotFound />} />
        	</Routes>
      	</Layout>
    </BrowserRouter>
  );
};

export default App;

Realice algo simple

NotFound.jsx

        <div>
            <h1 className="title-404">404</h1>
            <p className="text-404">Oops! Pagina no encontrada.</p>
            <a className="button-404" href="#">Regrese a la página inicial, es mejor.</a>
        </div>

Además recuerden realizar la importación del scss

import '../styles/NotFound.scss'

NotFound.scss

@import url(https://fonts.googleapis.com/css?family=Roboto:400,100,300,500);

.button-404 {
  font-weight: 300;
  background-color:var(--hospital-green);
  color: var(--white);
  font-size: 1.2em;
  text-decoration: none;
  border: 1px solid #efefef;
  padding: .5em;
  border-radius: 3px;
  float: left;
  margin: 0 0 0 -168px;
  left: 50%;
  position: relative;
  transition: all .3s linear;
}

.text-404 {
  font-size: 2em;
  text-align: center;
  font-weight: 100;
}

.title-404 {
  margin-top: 0.2em;
  margin-bottom: 0.2em;
  text-align: center;
  font-size: 10em;
  font-weight: 100;
}

Aqui esta mi 404 super Profesional

Asi quedo el mio jj

En mi caso yo tengo la versión:
“react-router-dom”: “^6.2.2”

Como bien dicen en los comentarios. Switch ya no se usa y también se omite el parámetro “exact”. Por consecuencia ahora se usa de otra forma.

Les dejo como quedó mi ejemplo completo

import React from 'react';
import '../styles/global.css';

import { BrowserRouter, Routes, Route } from 'react-router-dom';

import Layout from '../containers/Layout';
import Login from '../containers/Login';
import RecoveryPassword from '../containers/RecoveryPassword';
import Home from '../pages/Home';
import NotFound from '../pages/NotFound';

const App = () => {
  return (
    <BrowserRouter>
      <Layout>
        <Routes>
          <Route path="/" element={<Home />} />
          <Route path="/login" element={<Login />} />
          <Route path="/recovery-password" element={<RecoveryPassword />} />
          <Route path="*" element={<NotFound />} />
        </Routes>
      </Layout>
    </BrowserRouter>
  );
};

export default App;

Hace falta agregar path="*" al ultimo Router para que pueda renderizar el componente NotFound 👍

Me tomo un tiempo conectar el rompecabezas con todas las actualziaciones que han ocurrido, aqui dejo un resumen:.

Ano 2022:

• Hace unas semanas salio React18

• React router dom esta en su version 6 RRD6

.
Entonces:
En el archivo index.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './routes/App';

// ESTO YA NO FUNCIONA
// ReactDOM.render(
//     <App />,
//     document.getElementById('root')
// );

//AHORA ES ASI
import { createRoot } from 'react-dom/client';
const container = document.getElementById('root');
const root = createRoot(container);
root.render(<App tab="home" />);

Modificacion de las rutas
En el archivo App.jsx

import React from 'react'
import { BrowserRouter, Routes, Route, Navigate} from "react-router-dom";
import PasswordRecovery from '../containers/PasswordRecovery';
import NotFound from '../pages/NotFound';
import Layout from '../containers/Layout';
import Login from '../containers/Login';
import Home from '../pages/Home';
import '../styles/global.css';

const App = () => {
    return (
        <BrowserRouter>
            <Layout>
                <Routes>
                    <Route path="/" element={<Home/>} />
                    <Route path="/home" element={<Navigate to="/" />} />
                    <Route path="/login" element={<Login />} />
                    <Route path="/password-recovery" element={<PasswordRecovery />} />
                    <Route path="*" element={
                    	<div style={{ padding: "1rem" }}><p>There's nothing here!</p></div>
                    }/>
                </Routes>
            </Layout>
        </BrowserRouter>
    );
};

export default App;

Por si acaso, otras rutas de ejemplo que les pueden ser utiles, para otros casos

 {/* ----------------  otros ejemplos -----------------*/}
<Route path="/path/:parametro" element={<Posts/>} />
<Route path="/anidamiento/*" element={<Dashboard/>}>
             <Route path="ruta1" element={<Users/>} />
             <Route path="ruta2" element={<Posts/>} />
</Route>

 {/* ejemplos con redirect ahora (rrdom-6) es navigate */}
<Route path="/not-found" element={<NotFound />} />
<Route path="*" element={<Navigate to="/not-found" />} />	

Utilizando Link de react-router-dom

import React from 'react';
import { Link } from 'react-router-dom';
import '../styles/NotFound.scss';

export const NotFound = () => {
   return (
      <div className="NotFound">
         <img
            src="https://i.pinimg.com/originals/86/41/80/86418032b715698a4dfa6684b50c12af.gif"
            alt=""
         />
         <Link to="/">
            <h1>Return to Home</h1>
         </Link>
      </div>
   );
};

Asi quedo el reto de la pagina de error 404

Y al hacer Hover al enlace el fantasmita se anima…!

Trate de usar los colores que tiene el proyecto para no afectar o que no se vea un poco extraño…!

Así quedó mi página NotFound:

Bueno, por lo que averigue historyApiFallback conecta nuestra app con html5 History api, la cual nos ayuda a manejar el historial de navegacion y a reconocer las rutas que estamos manejando.

Pero historyApiFallback es una librería aparte que fue creada para solucionar ciertos problemas de usabilidad que traía por defecto History API, que no llegué a entender del todo.

Si dejamos la opcion por defecto (false) podemos conectarnos al home, pero no va a reconocer las demás rutas que usemos, por lo que es de vital importancia tener esta opcion activada

Si saben de esta API o librería y quieren ayudarme a aclarar cómo es su funcionamiento exacto les estaré agradecido

Encontré este recurso en linea para agragar un 404 más animado, aunque si no tienes mucha destreza con html y css es recomendable hacerla desde cero para adquirir agilidad.

https://plantillashtmlgratis.com/en/categoria/css-code/css-404-page/

Curso bastante desactualizado, si no es por los comentarios uno no sabria ni que hacer, muchas cosas mal, en una clase pone el devServer elige puerto 3005 y en otra clase no lo tiene puesto, cosa q da problemas y si uno no se entera q es eso se vuelve loco, este curso un poco disapointed, oscar suele hacer buenos cursos…

Aquí mi página de error 404

Para los que les de este error

Probablemente cuando descarguen react-router-dom les dé una versión muy nueva y Switch no se exporta de la misma manera en versiones nuevas. Lo que yo hice para solucionar el error fue que cambie la versión de la dependencia con el siguiente comando.

npm install [email protected]5.2.0

La razón de que use esa versión es porque es la versión que uitiliza el maestro dentro de este curso.

.
Templates. Para la pagina 404 😄

Aquí dejo el diseño de mi pagina de error 404 😄

Buenas noches.

Asi quedo mi aporte de mi Not Found

El Switch ya esta obsoleto y pertenece a la version de ReactRouter 5. Al dia de hoy Diciembre 12, 2021 - Si ejecutas --> npm install react-router-dom el sistema te va a instalar la version 6. Por esa razon nos aparece el error: “export ‘Switch’ (Imported as ‘Switch’) was not found in ‘react-router-dom’ … etc” Solucion: Verifique las dependencias instaladas en el Archivo package.json, alli usted sabra que version tiene instalada. Si tiene instalada la version 6, siga las instrucciones de la documentacion en este Link: https://reactrouter.com/docs/en/v6/getting-started/installation - Esta en Ingles, pero es entendible. En Resumen, Switch se cambia a Routes y cambia un poco el formato. Aqui lo tienen:
import React from ‘react’;
import { BrowserRouter, Routes, Route } from ‘react-router-dom’;
import Layout from ‘…/containers/Layout’;
import Login from ‘…/containers/Login’;
import RecoveryPassword from ‘…/containers/RecoveryPassword’;
import ‘…/styles/global.css’;
import Home from ‘…/pages/Home’;
import NotFound from ‘…/pages/NotFound’;

const App = () => {
return (
<BrowserRouter>
<Layout>
<Routes>
<Route path="/" element={<Home />} />
<Route path=“login” element={<Login />} />
<Route path=“recovery-password” element={<RecoveryPassword />} />
<Route path="*" element={<NotFound />} />
</Routes>
</Layout>
</BrowserRouter>
);
}

export default App;

Notese el detalle para las rutas no encontradas o error 404.

Solución reto de 404

Código

Utilice una estructura similar a lo desarrollado en el curso de frontend

NoutFound.jsx

import React from 'react'
import '../styles/NotFound.scss'

const NotFound = () => {
  return (
    <div className="not-found-container">
      <div className="not-found-info">
        <h1 className="not-found-title">404 Not Found</h1>
        <h2>This page is not found</h2>
        <button className="primary-button">Go Home</button>
      </div>
    </div>
  )
}

export default NotFound

NotFound.scss

@use 'vars';

.not-found-container {
  width: 100%;
  height: 100vh;
  display: grid;
  place-items: center;
}

.not-found-info {
  display: grid;
  grid-template-rows: auto 1fr auto;
  width: 300px;
  text-align: center;
}

.primary-button {
  background-color: var(--hospital-green);
  border-radius: 8px;
  border: none;
  color: var(--white);
  width: 100%;
  cursor: pointer;
  font-size: var(--md);
  font-weight: bold;
  height: 50px;
}

Con la nueva versión de React Router me quedó así:

import React from 'react';
import '../styles/Login.scss'
import '../styles/global.scss'
import Login from '../containers/Login'
import Layout from '../containers/Layout';
import RecoveryPassword from '../containers/RecoveryPasword'
import NotFound from '../pages/NotFound';
import Home from '../pages/Home';
import { BrowserRouter, Route, Routes } from 'react-router-dom'


const App = () =>{
    return (
        <BrowserRouter>
        <Layout>
        <Routes>
          <Route path="/" element={<Home />}/>
                <Route path="/login" element={<Login />} />
                <Route path="/recovery-password" element={<RecoveryPassword />} />
                <Route path="*" element={<NotFound />} />
        </Routes>
        </Layout>
      </BrowserRouter>
    );
}
export default App;

a mi me funciono esto ya que me aparecia la page en blanco y cuando abria la consola del navegador me marcaba este error

Uncaught Error: Objects are not valid as a React child (found: object with keys {children}). If you meant to render a collection

la solución fue esta en el Layout.jsx

import React from 'react';
const Layout = (props) => {
    return (
        <div className="layout">
            {props.children}
        </div>
    );
}
export default Layout;

y en el app.jsx como lo mencionan los otros compañeros para la version 6 del react-router-dom

Hoy 17 de Abril 2022 me dio un error porque ya no me acepto el ReactDOM.render. En la consola me dio este error.
"Deprecation notice: ReactDOM.render is no longer supported in React 18"
La solucion la encontre en la documentacion y esta publicacion de
StackOverflow

Hagan esos cambios, a mi me funciono.

Por si no entendieron que pasó con NotFound

Switch intercala entre cada uno de los tags que le pasemos en el interior, como si fuera un condicional switch. Al pasarle la etiqueta Layout y meter todas las rutas adentro lo que estamos haciendo es insertar una sola opcion, que en el caso de que todas las rutas sean distintas no pasará nada. Pero si dos rutas coinciden va a ejecutarlas al mismo tiempo como si fuera una sola opcion
.
Para que esto no pase adentro de Switch cada ruta va en un tag distinto (<Route />) entonces switch se ve obligado a elegir solamente una ruta y es imposible que renderice dos al mismo tiempo, ya que tiene que elegir.
.
La ruta notfound tiene por defecto un path universal (path="*") lo que equivale a la instruccion “renderizate en cualquier ruta al menos que ya esté asignada”

Si les aparece el famoso Canot get /login u otra ruta,
cierren los procesos, el visual todo xd y reinicien. Al parecer es un bug común.

Para los que quieran usar react-router-dom 6, aca tienen un recurso que les puede ayudar 🤗

recurso

Asi me quedo mi pagina de error 404 😄

Hola chicos les comparto mi configuración con react 18.

App.jsx

import React from 'react';
import Layout from '../containers/Layout';
import Home from '../pages/Home';
import Login from '../containers/login';
import RecoveryPassword from '../containers/RecoveryPassword';
import NotFound from '../pages/NotFound';
import '../styles/global.css';
import { BrowserRouter, Route, Routes } from 'react-router-dom';


const App = () => {
    return (
        <BrowserRouter>
            <Layout>
                <Routes>
                    <Route path="/" element={<Home />} />
                    <Route path="login" element={<Login />} />
                    <Route path="recovery-password" element={<RecoveryPassword />} />
                    <Route path="*" element={<NotFound/>} />
                </Routes>
            </Layout>
        </BrowserRouter>
    );
};

export default App;

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './routes/App';

const root = ReactDOM.createRoot(
    document.getElementById("app")
);
root.render(<App tab="home" />);```

historyApiFallback

Mi humilde aporte

![](

Mi 404 😃

si instalaron react-router-dom en la **version 6 **les comparto como quedaria el codigo

import React from 'react'
//En vez de importar Switch importamos Routes
import { BrowserRouter, Routes, Route } from 'react-router-dom'
import { Layout } from '../containers/Layout';
import { Login } from '../containers/Login';
import { RecoveryPassword } from '../containers/RecoveryPassword';
import { Home } from '../pages/Home';
import { NotFound } from '../pages/NotFound';
import '../styles/global.scss'

function App () {
    return(
        <BrowserRouter>
            <Layout>
                <Routes>
                    <Route exact path='/' element={<Home />}/>
                    <Route exact path='/login' element={<Login />}/>
                    <Route exact path='/recovery-password' element={<RecoveryPassword />}/>
                    <Route path='*' element={<NotFound />} />
                </Routes>
            </Layout>
        </BrowserRouter>
        
    )
}

export default App;

La estructura al llamar el componente de la ruta cambia un poquito

// v5
<Route exact path='/' component={Home}/>

// v6 en vez de component es element y en vez de llamarlo entre corchetes {Home} lo llamamos entre corchetes y como un componente normal de react pero que no tiene hijos {<Home />}
<Route exact path='/' element={<Home />}/>

Espero haberlos ayudado un poquito

Actualizacion 29/03/2022
despues de installar react-router-dom los siguientes codigos son los que aplican

import { BrowserRouter, Routes, Route } from 'react-router-dom';

y para las rutas:

function App() {
  return (
    <BrowserRouter>
      <Layout>
        <Routes>
          <Route path='/' element={<Home />} />
          <Route path='/CorreoEnviado' element={<NotFound />} />
          <Route path='/RecuperarContrasena' element={<Rec_contrasena />} />
          <Route path='*' element={<NotFound />} />
        </Routes>
      </Layout>
    </BrowserRouter>
  );
}

export default App;

Hola que tal al generar las nuevas actualizaciones, mi sitio sigue sin verse, esta todo en blanco

A alguien mas le paso, lo mismo ??

Dato importante, en las nuevas versiones para que figure “not found” al poner una ruta inexistente en las nuevas versiones de react-router-dom, se debe poner…

<BrowserRouter>
	<Layout>
		<Routes>
			<Route path="/" element={<Home />} />
			<Route path="/login" element={<Login />} />
			<Route path="/recovery-password" element=				 
 						{<RecoveryPassword />} />
			<Route path='*' element={<NotFound />} />
		</Routes>
	</Layout>
</BrowserRouter>

Otro detalle de la nueva version, dentro del Route, para hacer referencia al componente se debe poner “<Componente />” dentro del “element=” y quedaria asi --> “element=<Componente />”

Ultimo detalle importante es que para que un componente padre (Layout) distribuya informacion (props) a todos los hijos (Home, Login, etc), este debe encerrar a Routes (switch)

Solo para tener en cuenta: en la clase el profe cambia el orden de Layout y Switch, y hasta ahí está bien pero el corrigió algo más que no nos mostró en video y fue cuando al Route que nos llevaba a la pagina de “error 404” le añadió un path=’*’ y esto es importante para el comportamiento correcto.

Creo que tambien debe mostrar esos errores que corrige porque el alumno puede matarse creyendo que escribió todo bien siguiendo las instrucciones y el realiza ajustes que no vemos y por tanto nuestro proyecto podría fallar, tomandonos bastante tiempo en pensar la solucion que se pudo explicar en segundos.

Aqui mi aporte del error 404

Sinceramente ya habia visto uno hace tiempo

Prefiero lo minimalista sin mas

Aquí mi página de error 404, como aún no hemos creado una carpeta para los archivos, lo que hice fue usar una web gratis que te permite hace subida de archivos a la nube y usarlos mediante URLs. Por si alguno le viene bien la idea y quiere seguir el curso como va el profesor.

Excelente curso y excelente profesor, pero por favor actualicen el contenido

Otra cosa muy importante para aplicaciones single page (como la que estamos desarrollando en el curso) es configurar el devServer de webpack para caer siempre en index.html cuando el sitio cargue desde otras rutas con la sig. configuracion:

  devServer: {
    port: '[cualquier puerto]',
    historyApiFallback: true, // esta es la config importante
  },

Asi lo hice en la nueva version.

import React from "react";
import { BrowserRouter, Routes, Route } from "react-router-dom";
import "../styles/global.css";
import Home from "../pages/Home";
import Login from "../containers/Login";
import RecoveryPassword from "../containers/RecoveryPassword";
import NotFound from "../pages/NotFound";

const App = () => {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/login" element={<Login />} />
        <Route path="/recovery-password" element={<RecoveryPassword />} />
        <Route path="/*" element={<NotFound />} />
      </Routes>
    </BrowserRouter>
  );
};

export default App;

Actualmenete se utiliza así

import {
  createBrowserRouter,
  RouterProvider,
} from "react-router-dom";

  const router = createBrowserRouter([
    {
      path: "/",
      element: <Login />,
    },
    {
      path: "/login",
      element: <Login />,
    },
    {
      path: "/recovery-password",
      element: <RecoveryPassword />,
    }
  ]);

      <React.StrictMode>
        <Layout>
          <RouterProvider router={router} />
        </Layout>
      </React.StrictMode>

Algo sencillo, que encontré por Reddit 😅

Los cambios no son unicamente en el app.jsx a partir de React 18, sino tambien en index.js. Queda lo siguiente:

import React from 'react';
import App from './routes/App';
import { createRoot } from 'react-dom/client';
const container = document.getElementById('app');
const root = createRoot(container); // createRoot(container!) if you use TypeScript
root.render(<App tab="home" />);

Mi reto Error 404

Index.js
2022

import React from 'react';
import ReactDOM from 'react-dom';
import App from './routes/App';

ReactDOM.createRoot(
    document.getElementById('app'),
  )
  .render(
    <React.StrictMode>
      <App />
    </React.StrictMode>,
  );

App.jsx
2022

import React from 'react';
import { BrowserRouter, Routes, Route } from 'react-router-dom';
import Layout from '../containers/Layout';
import Login from '../containers/Login';
import RecoveryPassword from '../containers/RecoveryPassword';
import Home from '../pages/Home';
import NotFound from '../pages/NotFound';
import '../styles/global.scss';


const App = () => {
	return (
		<BrowserRouter>
			<Layout>
				<Routes>
					<Route exact path="/" element={<Home />} />
					<Route exact path="/login" element={<Login/>} />
					<Route exact path="/recovery-password" element={<RecoveryPassword />} />
					<Route path='*' element={<NotFound />} />
				</Routes>
			</Layout>
		</BrowserRouter>
	);
}

export default App;

Index en React 18

import React from 'react';
import {StrictMode} from 'react';
import App from './routes/App';
import {createRoot} from 'react-dom/client';


const rootElement = document.getElementById('app');
const root = createRoot(rootElement);

root.render(
  <StrictMode>
    <App />
  </StrictMode>,
);

Wow! me quedo sorprendida con lo que he aprendido… Super!
Aqui mi animacion de 404

CUIDADO!!! En la parte de App han cambiado los imports de react-router-dom.

También han cambiado los atributos de <Route/>. Ahora no es ‘component = { NotFound }’ sino que es ‘element = {
<NotFound/> }’

AQUÍ OS DEJO MI CÓDIGO.

el shortcode cambio de slr a rscp par agenerar el contenido base de los componentes

Omg yendo a hacer el curso de Webpack

Algo simple pero que tiene su funcionalidad👍💚

Not Found de mi proyecto clon de netflix que estoy realizando:

Así quedó el mío:

Si recientemente estas tomando este curso tambien es recomendable cambiar a la siguiente estructura en el archivo index.js React V.18

/* ============================================================
                BEFORE  
============================================================ */

import React from 'react';
import ReactDOM from 'react-dom';
import App from './routes/App';

ReactDOM.render(<App />, document.getElementById('app'));

/* ============================================================
               AFTER  - React 18
============================================================ */

import React from 'react';
import { createRoot } from 'react-dom/client';
import App from './routes/App'

const container = document.getElementById('app');
const root = createRoot(container);
root.render(<App/>);

Para que les cargue el icono del correo. Importan el ícono

import iconEmail from '../../public/assets/icons/email.svg';

Y luego en la etiqueta img colocan;

 <img src={iconEmail} alt="email"/>

Asi quedo mi Not Found Page

Código de App.js actualizado:

import React from 'react';
import { BrowserRouter, Routes, Route } from 'react-router-dom';
import Layout from '../containers/Layout';
import Login from '../containers/Login';
import RecoveryPassword from '../containers/RecoveryPassword';
import Home from '../pages/Home';
import NotFound from '../pages/NotFound';
import '../styles/global.css';


const App = () => {
  return (
    <BrowserRouter>
      <Layout>
        <Routes>
          <Route exact path="/" element={ <Home /> } />
          <Route exact path="/login" element={ <Login /> } />
          <Route exact path="/recovery-password" element={ <RecoveryPassword/> } />
          <Route path='*' element={ <NotFound /> } />
        </Routes>
      </Layout>
    </BrowserRouter>
  );
}

export default App;```

Uncaught Error: [Layout] is not a <Route> component. All component children of <Routes> must be a <Route> or <React.Fragment>

¿A alguien le salió este error?

Lean un momento la documentacion de React Router.
https://reactrouter.com/docs/en/v6/upgrading/v5

Uno de los cambios importantes es al renderizar al componente con <Route/> ya no se utiliza componente={} si no element={} o se pasa como un children, like this:

function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="users/*" element={<Users />} />
      </Routes>
    </BrowserRouter>
  );
}

function Users() {
  return (
    <div>
      <nav>
        <Link to="me">My Profile</Link>
      </nav>

      <Routes>
        <Route path=":id" element={<UserProfile />} />
        <Route path="me" element={<OwnUserProfile />} />
      </Routes>
    </div>
  );
}

Dejo la documentación de React Router en la última versión hasta la fecha. 🙌

https://reactrouter.com/docs/en/v6

¿Han probado la nueva alternativa a webpack? https://vitejs.dev/

Vi que en la version 6 de ‘react-router’, se usa Routes en vez de Switch

hola alguien sabe como solucionar este warning?

Puede que necesites actualizar la importación del componente App.jsx, ya que cambió de carpeta en el anterior video.

Quedaría así:
import App from ‘…/src/routes/App’;

no me quiere funcionar, me saca errores ya ley la documetnacion de react y react router en cambios de las nuevas versiones pero no logro hacer que funcione recibo estos errores, porfavor ayuda

Uncaught Error: [Layout] is not a <Route> component. All component children of <Routes> must be a <Route> or <React.Fragment>

ddd
The above error occurred in the <Routes> component:

Reto cumplido, esta sencillo pero espero les guste, el cambio de colores es un hover

Para los que quieran más información de la v6 de react-route-dom dejo este enlace a la documentación oficial por aquí.

Les comparto mi página de Error 404:

Simple y a la vez descriptivo 😄

![Image](

Página error 404.

😎

![](

Mi imagen de error 404:

ahora si me decepciono profe su curso esta muy pero muy mal

Para que funcionen las rutas aparte de las configuraciones indicadas tuve que:

1. Al archivo App.js modificar así:

import React from 'react'
import {
  BrowserRouter,
  Routes,
  Route,
} from "react-router-dom"
import Home from '../pages/Home'
import NotFound from '../pages/NotFound'
import Layout from '../containers/Layout'
import Login from '../containers/Login'
import RecoveryPassword from '../containers/RecoveryPassword'
import '../styles/global.css';

const App = () => {
  return (
    <BrowserRouter>
      <Layout>
        <Routes>
          <Route index element={<Home />} />
          <Route path='/login' element={<Login />} />
          <Route path='/recovery-password' element={<RecoveryPassword />} />
          <Route path="*" element={<NotFound />} />
        </Routes>
      </Layout>
    </BrowserRouter>
  )
}

export default App

1. package.json

Mi solición a la vista del NotFound page:

Me pareció interesante poder manejar diferentes Layouts según la ruta que se solicita, en este ejemplo utilicé dos Layouts anidando rutas:

 <BrowserRouter>
      <Routes>
        <Route path="/" element={<Layout />}>
          <Route path="/login" element={<Login />} />
          <Route path="/password-recovery" element={<PasswordRecovery />} />
          <Route path="*" element={<NotFound />} />
        </Route>
        <Route path="/" element={<LayoutAdmin />}>
          <Route path="/logins" element={<Login />} />
        </Route>
      </Routes>
    </BrowserRouter>

En el componente de Layout queda algo como esto:

import React from "react";
import { Outlet } from "react-router-dom";
import { Nav } from "../components/Nav";

export const LayoutAdmin = () => {
  return (
    <div className="Layout">
      <Nav />
      <h1>Admins</h1>
      <Outlet />
    </div>
  );
};