0

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>
   );
 }
2
  • 1
    Pon el Switch fuera del Navbar.
    – gugadev
    Commented el 29 ene. 2020 a las 14:25
  • @gugadev hola gracias por la pronta respuesta, sigue dandome un loop
    – Richi
    Commented el 30 ene. 2020 a las 19:51

1 respuesta 1

1

Listo, estaba llamando al componente home infinitamente por eso estaba en un loop.

 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 path="/sign-in">
                <LoginPage />
                </Route>
            </Switch>
        </Navbar>

        </Router>
    </Fragment>
);
 }
}

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.