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.