React-Bootstrap-Linkelement in einem Navitem

Ich habe einige Styling-Probleme mit React-Router und React-Bootstrap. Unten ist ein Ausschnitt aus dem Code

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>

So sieht es beim Rendern aus.

Ich weiß, dass das <Link></Link>das verursacht, aber ich weiß nicht warum? Ich möchte, dass dies in Einklang steht.

Sie sollten keinen Anker hineinlegen NavItem. Auf diese Weise wird in der Konsole eine Warnung angezeigt:

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

Das liegt daran, dass beim NavItemRendern bereits ein Anker (direktes Kind von NavItem) vorhanden ist.

Aufgrund der obigen Warnung wird React gezwungen, die beiden Anker als Geschwister zu behandeln, was das Stilproblem verursacht hat.

Die Verwendung von LinkContainer über den React -Router-Bootstrap ist der richtige Weg. Der folgende Code sollte funktionieren.

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>

Dies ist meistens ein Hinweis für das zukünftige Selbst, wenn Sie dieses Problem googeln. Ich hoffe, jemand anderes könnte von der Antwort profitieren.

2020 upd: getestet mit react-boostrap: 1.0.0-beta.16undreact-router-dom: 5.1.2

Aktualisierung 2019: Für diejenigen, die mit React -Bootstrap v4 (derzeit mit 1.0.0-beta.5) und React-Router-Dom v4 (4.3.1) arbeiten, verwenden Sie einfach "als" Prop von Nav.Link, hier ist voll Beispiel:

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>

Hier ist ein Arbeitsbeispiel: https://codesandbox.io/s/3qm35w97kq

Haben Sie versucht, React-Bootstraps zu verwenden componentClass?

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

Sie können die Verwendung LinkContainervon React-Router-Bootstrap vermeiden . Allerdings componentClasswird werden asin der nächsten Version. Sie können also das folgende Snippet für die letzte Version (v1.0.0-beta) verwenden:

<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>

Hier ist eine Lösung für die Verwendung mit 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
};

Sie können mit der Geschichte , nur sicher sein , um die Komponente erstellen mit Router :

in App.js:

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

const NavigationWithRouter = withRouter(Navigation);

//in render()
    <NavigationWithRouter />

in 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>

IndexLinkContainer ist eine bessere Option als LinkContainer, wenn das Inside NavItem basierend auf der aktuellen Auswahl hervorheben soll, welcher aktiv ist . Es wird kein manueller Auswahlhandler benötigt

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>

Verwenden Sie dieses Format, um Funktionen mit der Requisite "activeKey" in der Beta-Version von react-bootstrap v_1.0 hinzuzufügen:

<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>