Últimos retoques a las rutas de nuestra aplicación

Para solucionar un error que se presenta al iniciar sesión agreguen la prop noThrow a los Redidect:

{!isAuth && <Redirect noThrow from='/favs' to='/login' />}
{!isAuth && <Redirect noThrow from='/user' to='/login' />}

Con eso ya debería funcionar

Cuando intento cambiar de favs a user sin Iniciar sesión aparece este error.

Como puedo evitarlo.

Hola compañeros, por si estan usando “react-router-dom” en la v6, al parecer redirect ya no existe y lo sustituyeron con “navigate”

import React, { useContext } from 'react'

import { Logo } from './components/Logo'
import { BrowserRouter, Routes, Route, Navigate } from 'react-router-dom'
import { GlobalStyle } from './components/styles/GlobalStyles'
import { NavBar } from './components/NavBar'

import { Home } from './pages/Home'
import { Detail } from './pages/Detail'
import { Favorites } from './pages/Favs'
import { User } from './pages/User'
import { NotRegisteredUser } from './pages/NotRegistered'
import { NotFound } from './pages/NotFound'

import { AppContext } from './Context/Context'

const App = () => {
  const { isAuth } = useContext(AppContext)

  return (
    <BrowserRouter>
      <GlobalStyle />
      <Logo />
      <Routes>
        <Route exact path='/' element={<Home />} />
        <Route exact path='/pet/:id' element={<Home />} />
        <Route exact path='/detail/:id' element={<Detail />} />
        <Route exact path='/favs' element={isAuth ? <Favorites /> : <Navigate replace to='/login' />} />
        <Route exact path='/user' element={isAuth ? <User /> : <Navigate replace to='/login' />} />
        <Route exact path='/login' element={!isAuth ? <NotRegisteredUser /> : <Navigate replace to='/' />} />
        <Route path='*' element={<NotFound />} />
      </Routes>
      <NavBar />
    </BrowserRouter>
  )
}

export { App }

Esto está desordenado primero debería ir Últimos retoques a la ruta… y luego React Helmet

Para resolver el error
https://github.com/reach/router/issues/100#issuecomment-415424987

Que miedo me ha dado cuando a empezado a decir lo que vamos a hace a continuación =S

Para los que utilizan react-router-dom, no olviden que la ruta por default se debe colocar al final de las que esta definidas.

<BrowserRouter>
  <Layout>
    <Switch>
      <Route exact path='/'render={(props) =><Home {...props} />} />
      <Route exact path='/pet/:id'render={(props) =><Home {...props} />} />
      <Route exact path='/detail/:detailId' component={Detail}/>

      {!isAuth && <Route exact component={NotRegisteredUser} path="/login" />}
      {!isAuth && <Redirect from="/favs" to="/login" />}
      {!isAuth && <Redirect from="/user" to="/login" />}
      {isAuth && <Redirect from="/login" to="/" />}

      <Route exact path='/favs' component={Favs} />
      <Route exact path='/user' component={User} />
      <Route component={NotFound} key="Error 404"/>

    </Switch>
  </Layout>
</BrowserRouter>

App.js

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

import { AppContext } from "./Context/AppContext";

//styles
import { GlobalStyle } from "./Styles/GlobalStyles";

//PAGES
import { Home } from './Pages/Home';
import { Detail } from "./Pages/Detail";
import { Favs } from "./Pages/Favs";
import { User } from "./Pages/User";
import { NotRegisteredUser } from "./Pages/NotRegisteredUser";
import { NotFound } from "./Pages/NotFound";

//COMPONENTS
import { Logo } from './Components/Logo';
import { NavBar } from './Components/NavBar';

export const App = () =>{
    const  urlParams = new window.URLSearchParams(window.location.search)
    const detailId = urlParams.get('detail')
    console.log(detailId)
    const { isAuth } = useContext(AppContext)
    return (
        <BrowserRouter>
        <GlobalStyle />
        <Logo />
        <Routes>
            <Route exact path='/' element={<Home />} />
            <Route exact path='/pet/:id' element={<Home />} />
            <Route exact path='/detail/:id' element={<Detail />} />
            <Route exact path='/favs' element={isAuth ? <Favs /> : <Navigate replace to='/login' />}/>
            <Route exact path='/user'  element={isAuth ? <User /> : <Navigate replace to='/login' />} />
            <Route exact path='/login' element={!isAuth ? <NotRegisteredUser /> : <Navigate replace to='/' />} />
            <Route path='*' element={<NotFound />} />

        </Routes>
        <NavBar />
        </BrowserRouter>
    )
} 

NotFound.js

import React from 'react'

export const NotFound = () => {
  return (
    <h1>La página no existe</h1>
  )
}

Si tienen problemas para que aparezca la ruta default
<NotFound default />
pueden probar colocando en webpack.config.js
devServer: {
historyApiFallback: true
},

El error que nos da al iniciar sesión, también lo podríamos solucionar agregando una acción en el momento en el que le damos al boton de iniciar sesión, pues iniciamos sesión cuando se nos genera un token, entonces si ese token es verdadero, podemos ejecutar una acción que nos lleve a la home, utilizando window.location.href = “/” o alguna función de reach/router., aunque no las miramos en este curso.

Dos consultas. Reach Router ya no necesita de un switch?
Cómo funciona el match en Reach Router? Parece que no va a la primera coincidencia.

reach router tiene switch?

Asi quedo mi context.js con las redirecciones para login/logout.

Lo que nose si “esta bien”/ “es correcto” que llame a la propiedad navigate() dentro del context

import React, { createContext, useState } from 'react'
import { navigate } from '@reach/router'
export const Context = createContext()

const Provider = ({ children }) => {
  const [isAuth, setIsAuth] = useState(() => {
    return window.sessionStorage.getItem('token')
  })
  const value = {
    isAuth,
    activateAuth: (token) => {
      setIsAuth(true)
      window.sessionStorage.setItem('token', token)
      navigate('/')
    },
    removeAuth: () => {
      setIsAuth(false)
      window.sessionStorage.removeItem('token')
      navigate('/login')
    }
  }
  return <Context.Provider value={value}>{children}</Context.Provider>
}
export default { Provider, Consumer: Context.Consumer }

Vengo del mundo de angular, si bien me gusta más React en comparación de Angular, la forma configurar las rutas, las de angular me parece muy superior y ordenado.

b

Excelente!!