web-dev-qa-db-de.com

React-Bootstrap-Link-Element in einem Navitem

Ich habe einige Styling-Probleme mit dem Reakt-Router und dem Reakt-Bootstrap. Unten ist ein Ausschnitt des Codes

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 aus, wenn es rendert.

 enter image description here

Ich weiß, dass der <Link></Link> dies verursacht, aber ich weiß nicht warum? Ich möchte, dass dies inline ist.

59
chad schmidt

Sie sollten in NavItem keinen Anker setzen. 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.

Dies liegt daran, dass beim Rendern von NavItem bereits ein Anker (direktes untergeordnetes Element von NavItem) vorhanden ist.

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

6
Ming

Verwenden Sie LinkContainer von reag-router-bootstrap , um fortzufahren. 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. 

219
Gennon

Haben Sie schon versucht, die componentClass vonreave-bootstrap zu verwenden?

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

2019 upd: Für diejenigen, die mit React-Bootstrap v4 (derzeit 1.0.0-Beta.5) und React-Router-Dom v4 (4.3.1) arbeiten, verwenden Sie einfach "as" Prop von Nav .Link, hier ist ein vollständiges 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 funktionierendes Beispiel: https://codesandbox.io/s/3qm35w97kq

8
Alexey

Hier ist eine Lösung für den Einsatz mit dem Reakt-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
};
5
voodooattack

Sie können history verwenden, stellen Sie jedoch sicher, dass Sie die Komponente mit dem Router erstellen:

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>
2
5ar

Sie können die Verwendung von LinkContainer aus dem Bootstrap von React-Router vermeiden. componentClass wird jedoch in der nächsten Version zu as. 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>
2
Alexey Kutalo

IndexLinkContainer ist eine bessere Option als LinkContainer, wenn Sie möchten, dass das NavItem in hervorheben soll, welches aktiv ist / basierend auf der aktuellen Auswahl. Es ist kein manueller Auswahlhandler erforderlich

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>
2
Sairam Krish

Verwenden Sie das folgende Format, um Funktionalität mit der Komponente "activeKey" in der reakt-bootstrap v_1.0 beta 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>
0
Young Scooter