1

estás son mis rutas:

Este componente es Routes.js:

<Switch>
        <Redirect
          exact
          from='/login'
          to={'dashboards'}
        />
      <RouteWithLayout
        component={DashboardsView}
        exact
        layout={MainLayout}
        path='/dashboards'
      />
      <RouteWithLayout
        component={Tutorial}
        exact
        layout={MainLayout}
        path='/tutoriales'
      />
</Switch>

En App.js tengo:

<Router history={browserHistory}>
  <Routes />
</Router>

Son más, pero a efectos prácticos esto sirve.

Lo que pasa es que cuando estoy, por ejemplo, en /tutoriales y actualizo la página me redirige a /dashboards siempre.

Este es el método que me cambia de ruta:

const handleLinkTo = (to) => {
    history.push(to);
};

Al parámetro to le paso '/dashboards' o '/tutoriales' de acuerdo al botón que se presiona. Lo cual funciona, pero reitero que el problema está en que al actualizar el navegador siempre me lleva a la primera ruta.

2
  • 1
    ¿Podrías añadir un CodeSandBox para ver el código?. De esta manera ver si hay alguno de esos componentes que hagan ocasionar el error y detectarlo
    – Adrian
    Commented el 19 abr. 2020 a las 15:42
  • Lo intentaré, en un rato lo publico y te aviso.
    – V0LT3RR4
    Commented el 19 abr. 2020 a las 19:02

4 respuestas 4

0

Tal vez el problema no esta en todo tu "setup" de las rutas, si no en como mandas a llamar esa function, yo tenia un problema parecido, y era porque en el link, le estaba mandando directamente llamar la funcion en el onclick del link, puede ser eso tu problema.

yo tenia algo como:

<a onClick={handleLinkTo} />

y se soluciono cuando lo cambie a:

<a onClick={(e) => handleLinkTo()} />
3
  • Hola, gracias por comentar. Ya tuve ese problema y está solucionado de la misma forma, jeje. He estado ahondando en el código, y estoy seguro de que es el <Route exact path='/login'> <Redirect from='/login' to={{ pathname: '/dashboards' }} /> </Route> Cuando se actualiza la página vuelve a tomar las rutas, toma la primera y se redirige al login y luego el login a /dashboard... Supongo que el que hizo esto lo hizo mal.
    – V0LT3RR4
    Commented el 16 abr. 2020 a las 14:58
  • Tambien eso me parecio raro, aunque hace rato que no use react-router-dom y no se si eso es valido, posiblemente tiene la logica de si ya esta logueado hacer el redirect no? lo digo porque tambien tenia ese error jejeje, pero ojala encuentres la solucion! ;) Commented el 16 abr. 2020 a las 15:06
  • Lo extraño es que en una versión anterior del código, el código es prácticamente el mismo pero no da ese problema...
    – V0LT3RR4
    Commented el 16 abr. 2020 a las 15:16
0

React-router-dom tiene un componente que se encarga de todo lo que deseas hacer este hace la funcion de un anchor y a la misma vez cuando le haces click hace el history.push si necesitas mas informacion aqui esta la documentacion

todo se resumen a algo tan sencillo como

<Link to="[path]">[Texto del enlace]</Link>

de manera que para tus necesidades solo tendrias que remplazar los Link por los anchor que ya existen

<Link to="/dashboard">Ver Inicio</Link>
<Link to="/tutoriales">Tutoriales</Link>

PD: para importar el componente Link

import {Link} from "react-router-dom"
0

Hice un sandbox de tu estructura de ruteo con BrowserRouter en vez de Router y funciona perfecto, aca esta el codigo:

import React from "react";
import { Switch, Route, BrowserRouter, Redirect } from "react-router-dom";
import "./styles.css";

export default function App() {
  return (
    <BrowserRouter>
      <Switch>
        <Redirect exact from="/login" to="/dashboards" />
        <Route path="/dashboards">
          <span>DASHBOARD</span>
        </Route>
        <Route path="/tutoriales">
          <span>TUTORIALES</span>
        </Route>
      </Switch>
    </BrowserRouter>
  );
}

Aca lo podes testear: https://codesandbox.io/s/brave-spence-fmgqo?file=/src/App.js:0-477. Al menos no pasa lo que decias que cuando recargas /tutoriales te redirige a /dashboard.

Asi que yo probaria eso, cambiar Router por BrowserRouter, a menos que si o si necesites usar Router en tu aplicacion, pero tene en cuenta que es la interface a mas bajo nivel de ruteo de react router dom: https://reacttraining.com/react-router/web/api/Router

5
  • Voy a probar como dices a ver si hay algún cambio, si me resulta te marco como respuesta y pongo recompensa para dartela.
    – V0LT3RR4
    Commented el 26 abr. 2020 a las 0:02
  • No funcionó como dices, ya tenía <Router history={browserHistory}> que cumple el mismo papel (browserHistory es el hook del history). Supongo que el origen del error se encuentra en otra parte... Estaré editando la pregunta en algún momento para mostrar mayor profundidad de las rutas.
    – V0LT3RR4
    Commented el 26 abr. 2020 a las 0:04
  • Es raro.. como ves en el sandbox, de esa forma deberia funcionar. Probaste usando BrowserRouter en vez de Router, verdad? Que tenes exactamente en el component: "RouteWithLayout"? Si queres pasame mas info del codigo del proyeto Commented el 27 abr. 2020 a las 17:20
  • Proba tmb cambiando en el Redirect: <Redirect exact from='/login' to='/dashboards' />, fijate el to tiene {} sin necesidad. Tmb si podes decime q version de React y react-router-dom estas usando.. Commented el 27 abr. 2020 a las 17:21
  • Después de actualizar corregí eso, pero funciona igual.
    – V0LT3RR4
    Commented el 27 abr. 2020 a las 19:16
0

el problema esta en los exact y el redirect te manda a /dashboards terminas ahi

1
  • 2
    como deberia dejar el codigo? Commented el 22 ene. 2021 a las 12:34

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.