ReactJS Bootstrap Navbar y Routing no funcionan juntos

Solución:

En primer lugar, en sus fragmentos no parece que esté envolviendo su código en un Router, así que debes asegurarte de hacerlo por dentro App o en ReactDOM.render:

import { BrowserRouter } from 'react-router-dom';

ReactDOM.render(
  <BrowserRouter>
    <App />
  </BrowserRouter>, 
  rootElement
  );

A continuación, su problema específico es que está renderizando react-bootstrap’s Nav.Link en lugar de react-router’s Link componente, por lo que el enrutador no detecta los cambios de ruta. Afortunadamente, react-bootstrap proporciona un accesorio de renderizado en la mayoría de sus componentes para especificar qué componente o elemento desea renderizar si no quiere el predeterminado. Cambie a algo como esto:

import { Switch, Route, Link } from 'react-router-dom';

class Navigation extends Component {
  render() {
    return (
      <div>
        <div>
          <Navbar>
            <Navbar.Brand as={Link} to="https://foroayuda.es/" >React-Bootstrap</Navbar.Brand>
            <Navbar.Collapse>
              <Nav className="mr-auto">
                <NavItem eventkey={1} href="https://foroayuda.es/">
                  <Nav.Link as={Link} to="https://foroayuda.es/" >Home</Nav.Link>
                </NavItem>
              </Nav>
              <Form inline>
                <FormControl type="text" placeholder="Search" className="mr-sm-2" />
                <Button variant="outline-success">Search</Button>
              </Form>
            </Navbar.Collapse>
          </Navbar>
        </div>
        <div>
          <Switch>
            <Route exact path="https://foroayuda.es/" component={Home} />
            <Route render={function () {
              return <p>Not found</p>
            }} />
          </Switch>
        </div>
      </div>
    );
  }
}

Para aquellos que tienen problemas con el estilo. Link componente de react-router-dom en la barra de navegación react-bootstrap, simplemente agregue className="nav-link", como esto:

<Link to="https://foroayuda.es/" className="nav-link">Home</Link>

en lugar de

<Nav.Link href="https://foroayuda.es/">Home</Nav.Link>

---

---

Utiliza Nuestro Buscador