1

Estoy tratando de crear rutas que carguen distintos componentes pero me anida uno debajo de otro.

En App.js tengo esto(aquí no hay anidación):

    <Router>
      <Link to='/register' >Registrarse</Link>
      <Link to='/login' >Login</Link>
      <Switch>
        <Route path='/' exact component={Home} />
        <Route exact path='/login' component={Login} />
        <Route exact path='/register' component={Register} />
        <Route exact path='/timeline' component={Timeline} />
        <Route exact path='*' componente={Home} />
      </Switch>
    </Router>

Al entrar en /login me carga el componente login.js pero al añadir una ruta que me lleve de login a register, me anida el register debajo de login cuando lo que yo quiero es que me cargue solo el register, alguna ayuda? Gracias

             <Router>
                <Link to='/register'>
                    <img src={DefaultIcon} alt="" />
                    <h1>Registrarse</h1>
                </Link>
                <Route exact path='/register' exact component={Register} replace />
            </Router>

1 respuesta 1

0

El patrón mas común es envolver toda la app en el componente Router, en este caso se esta usando Router en diferentes componentes, en App y Login.

Luego, puede ser suficiente declarar una sola ruta y su componente, para Register hay dos declararciones en App y en Login:

<Router>
                <Link to='/register'>
                    <img src={DefaultIcon} alt="" />
                    <h1>Registrarse</h1>
                </Link>
                <Route exact path='/register' exact component={Register} replace />
            </Router>

No pude reproducir el problema, pero puede que los puntos que mencioné tengan alguna relación.

Ahora, podrías configurar tus rutas y componentes de la siguiente forma:

//const Router = window.ReactRouterDOM.BrowserRouter;
const Router = window.ReactRouterDOM.HashRouter;
const Route =  window.ReactRouterDOM.Route;
const Link =  window.ReactRouterDOM.Link;
const Switch = window.ReactRouterDOM.Switch;

function App(){
  return(
    <div>
    <Router>
      <Link to='/' > Home</Link> -
      <Link to='/register' > Registrarse</Link> -
      <Link to='/login' > Login</Link>
      <Switch>
        <Route path='/' exact component={Home} />
        <Route exact path='/login' component={Login} />
        <Route exact path='/register' component={Register} />
        <Route exact path='/timeline' component={Timeline} />
        <Route exact path='*' componente={Home} />
      </Switch>
    </Router>
    </div>
  );
}

function Login(){
      return(
      <div>
          <h3>Estas en logIn</h3>
          <Link to='/register'><p>Regrasar a Registrarse</p></Link>
      </div>
      );
}


function Register(){
    return <h3>Estas en Register</h3>
}

function Home(){
    return <h3>Estas en Home</h3>
}

function Timeline(){
    return <h3>Estas en Timeline</h3>
}
 
 
ReactDOM.render(<App/>, document.getElementById('root'))
<script src='https://unpkg.com/[email protected]/umd/react.production.min.js'></script>
    <script src='https://unpkg.com/[email protected]/umd/react-dom.production.min.js'></script>
    <script src='https://unpkg.com/[email protected]/umd/react-router.min.js'></script>
    <script src='https://unpkg.com/[email protected]/umd/react-router-dom.min.js'></script>
    <script src='https://unpkg.com/[email protected]/babel.js'></script>
 

<div id="root"></div>

Actualización

Entonces debería poner todo el código en un solo .js? Son cientos y cientos de líneas

Otro patrón común, es crear un archivo js para cada componente, luego importarlos al componente donde se declaran los Route:

//App.js
import  {Home} from './Home'
import  {Register} from './Register'
import  {Login} from './Login'
//...
<Router>
  <Link to='/register' >Registrarse</Link>
  <Link to='/login' >Login</Link>
  <Switch>
    <Route path='/' exact component={Home} />
    <Route exact path='/login' component={Login} />
    <Route exact path='/register' component={Register} />
    <Route exact path='/timeline' component={Timeline} />
    <Route exact path='*' componente={Home} />
  </Switch>
</Router>

Espero que esta respuesta sea de ayuda.

3
  • Entonces debería poner todo el código en un solo .js? Son cientos y cientos de líneas. Vengo de Angular y quiero usar lo que viene siendo un routerLink Commented el 11 mar. 2021 a las 23:02
  • Puedes crear un archivo .js para cada componente, luego los importas al componente donde tienes tus Route declarados. En la demostración no lo puse así porque esta limitado a un solo archivo, pero en muchos ejemplos encontraras cada componente en su propio archivo .js.
    – g.4
    Commented el 11 mar. 2021 a las 23:10
  • Actualicé la respuesta, saludos.
    – g.4
    Commented el 11 mar. 2021 a las 23:17

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.