Estoy implementando las rutas dentro de la aplicacion en react en la navegacion, instale las librerias e hice las configuraciones respectivas. El problema explota cuando coloco los Switch dentro del navbar cuando me carga la pagina con los cambios esta queda en un loop infinito haciendo crashear el navegador, solo cuando saco switch se detiene.
// React
import React, { Fragment } from 'react';
// React router
import { BrowserRouter as Router, Switch, Route, Link } from 'react-router-dom';
// React Components
import { Home } from '../../views/Home';
import { LoginPage } from '../../views/Login';
// React bootstrap
import { Navbar, Form, Nav, NavDropdown, Button, FormControl } from 'react-bootstrap';
import { LoginForm } from '../Form';
export class NavbarLayout extends React.Component {
render() {
return(
<Fragment>
<Router>
<Navbar bg="light" expand="lg">
<Navbar.Brand href="#home">Sample App</Navbar.Brand>
<Navbar.Toggle aria-controls="basic-navbar-nav" />
<Navbar.Collapse id="basic-navbar-nav">
<Nav className="ml-auto">
<Nav.Link><Link to="/">Home</Link></Nav.Link>
<Nav.Link><Link to="/sign-in">Entrar</Link></Nav.Link>
</Nav>
<Form inline>
</Form>
</Navbar.Collapse>
<Switch>
<Route exact path="/">
<Home />
</Route>
<Route path="/sign-in">
<LoginPage />
</Route>
</Switch>
</Navbar>
</Router>
</Fragment>
);
}
}
La vista que me deberia mostrar es:
// React
import React from 'react';
export const LoginPage = () => {
return(
<h3>Login page</h3>
);
}
Switch
fuera delNavbar
.