react router - link - Elemento de enlace React-Bootstrap en un elemento de navegación

nav link react bootstrap

Question

Tengo algunos problemas de estilo con react-router y react-bootstrap. a continuación hay un fragmento del código

import { Route, RouteHandler, Link } from ''react-router'';
import AuthService from ''../services/AuthService''
import { Button, Nav, Navbar, NavDropdown, MenuItem, NavItem } from ''react-bootstrap'';

    <Nav pullRight>
      <NavItem eventKey={1}>
        <Link to="home">Home</Link>
      </NavItem>
      <NavItem eventKey={2}>
        <Link to="book">Book Inv</Link>
      </NavItem>
      <NavDropdown eventKey={3} title="Authorization" id="basic-nav-dropdown">
        <MenuItem eventKey="3.1">
          <a href="" onClick={this.logout}>Logout</a>
        </MenuItem>          
      </NavDropdown>  
    </Nav>

Esto es lo que parece cuando se procesa.

Sé que <Link></Link> está causando esto, pero no sé por qué. Me gustaría que esto esté en línea.

Answer 1

¿Has intentado usar el componentClass de clase react-bootstrap?

import { Link } from ''react-router'';
// ...
<Nav pullRight>
  <NavItem componentClass={Link} href="/" to="/">Home</NavItem>
  <NavItem componentClass={Link} href="/book" to="/book">Book Inv</NavItem>
</Nav>

Answer 2

Aquí hay una solución para usar con react-router 4:

import * as React from ''react'';

import { MenuItem as OriginalMenuItem, NavItem as OriginalNavItem } from ''react-bootstrap'';

export const MenuItem = ({ href, ...props }, { router }) => (
  <OriginalMenuItem onClick={e => {e.preventDefault();router.transitionTo(href)}} href={href} {...props}/>
);

MenuItem.contextTypes = {
  router: React.PropTypes.any
};

export const NavItem = ({ href, ...props }, { router }) => (
  <OriginalNavItem onClick={e => {e.preventDefault();router.transitionTo(href)}} href={href} {...props}/>
);

NavItem.contextTypes = {
  router: React.PropTypes.any
};

Answer 3

IndexLinkContainer es una mejor opción que LinkContainer si desea que el NavItem interno resalte cuál está activo en función de la selección actual. No se necesita un controlador de selección manual

import { IndexLinkContainer } from ''react-router-bootstrap'';
....

//Inside render
<Nav bsStyle="tabs" >
  <IndexLinkContainer to={`${this.props.match.url}`}>
    <NavItem >Tab 1</NavItem>
  </IndexLinkContainer>
  <IndexLinkContainer to={`${this.props.match.url}/tab-2`}>
    <NavItem >Tab 2</NavItem>
  </IndexLinkContainer>
  <IndexLinkContainer to={`${this.props.match.url}/tab-3`}>
    <NavItem >Tab 3</NavItem>
  </IndexLinkContainer>
</Nav>

Answer 4

No debe poner ancla dentro de NavItem . Al hacer esto, verá una advertencia en la consola:

Warning: validateDOMNesting(...): <a> cannot appear as a descendant of <a>. See Header > NavItem > SafeAnchor > a > ... > Link > a.

Esto se debe a que cuando NavItem se representa, un ancla (hijo directo del NavItem ) ya está allí.

Debido a la advertencia anterior, reaccionar se verá obligado a tratar a los dos presentadores como hermanos, lo que causó el problema de estilo.

Answer 5

Para agregar funcionalidad con el accesorio "activeKey" en react-bootstrap v_1.0 beta, use este formato:

<Nav activeKey={//evenKey you want active}>
    <Nav.Item>
        <LinkContainer to={"/home"} >
            <Nav.Link eventKey={//put key here}>
                {x.title}
            </Nav.Link>
        </LinkContainer>
    </Nav.Item>
    //other tabs go here
</Nav>

Answer 6

Puede evitar usar LinkContainer de react-router-bootstrap. Sin embargo, componentClass se convertirá en la próxima versión. Por lo tanto, puede usar el siguiente fragmento de código para la última versión (v1.0.0-beta):

<Nav>
    <Nav.Link as={Link} to="/home" >
        Home
    </Nav.Link>
    <Nav.Link as={Link} to="/book" >
        Book Inv
    </Nav.Link>
    <NavDropdown title="Authorization" id="basic-nav-dropdown">
        <NavDropdown.Item onClick={props.logout}>
            Logout
        </NavDropdown.Item>
    </NavDropdown>
</Nav>

Answer 7

Puede usar el history , solo asegúrese de crear el componente con el enrutador :

en App.js:

// other imports
import {withRouter} from ''react-router'';

const NavigationWithRouter = withRouter(Navigation);

//in render()
    <NavigationWithRouter />

en Navigation.js:

//same code as you used before, just make an onClick event for the NavItems instead of using Link

<Nav pullRight>
  <NavItem eventKey={1} onClick={ e => this.props.history.push("/home") } >
    Home
  </NavItem>
  <NavItem eventKey={2} onClick={ e => this.props.history.push("/book") } >
    Book Inv
  </NavItem>
</Nav>

Answer 8

Usar LinkContainer de react-router-bootstrap es el camino a seguir. El siguiente código debería funcionar.

import { Route, RouteHandler, Link } from ''react-router'';
import AuthService from ''../services/AuthService''
import { Button, Nav, Navbar, NavDropdown, MenuItem, NavItem } from ''react-bootstrap'';
import { LinkContainer } from ''react-router-bootstrap'';

/// In the render() method
<Nav pullRight>
  <LinkContainer to="/home">
    <NavItem eventKey={1}>Home</NavItem>
  </LinkContainer>
  <LinkContainer to="/book">
    <NavItem eventKey={2}>Book Inv</NavItem>
  </LinkContainer>
  <NavDropdown eventKey={3} title="Authorization" id="basic-nav-dropdown">
    <LinkContainer to="/logout">
      <MenuItem eventKey={3.1}>Logout</MenuItem>    
    </LinkContainer>      
  </NavDropdown>  
</Nav>

Esto es principalmente una nota para el yo futuro, al buscar en Google este problema. Espero que alguien más pueda beneficiarse de la respuesta.

Answer 9

2019 upd: para aquellos que están trabajando con react-bootstrap v4 (usando 1.0.0-beta.5 actualmente) y react-router-dom v4 (4.3.1) simplemente use "como" accesorio de Nav.Link, aquí está completo ejemplo:

import { Link, NavLink } from ''react-router-dom''
import { Navbar, Nav } from ''react-bootstrap''

<Navbar>
  {/* "Link" in brand component since just redirect is needed */}
  <Navbar.Brand as={Link} to=''/''>Brand link</Navbar.Brand>
  <Nav>
    {/* "NavLink" here since "active" class styling is needed */}
    <Nav.Link as={NavLink} to=''/'' exact>Home</Nav.Link>
    <Nav.Link as={NavLink} to=''/another''>Another</Nav.Link>
    <Nav.Link as={NavLink} to=''/onemore''>One More</Nav.Link>
  </Nav>
</Navbar>

Aquí hay un ejemplo de trabajo: https://codesandbox.io/s/3qm35w97kq