Skip to main content
3 de 3
se añadieron 14 caracteres en el cuerpo
g.4
  • 3.5k
  • 2
  • 11
  • 22

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.

g.4
  • 3.5k
  • 2
  • 11
  • 22