navitem의 React-Bootstrap 링크 항목

react-router 및 react-bootstrap을 사용하여 스타일링 문제가 있습니다. 아래는 코드 스 니펫입니다.

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>

이것이 렌더링 할 때의 모습입니다.

나는 이것이 <Link></Link>원인 이라는 것을 알고 있지만 이유를 모르겠습니까? 나는 이것이 인라인되기를 바랍니다.

내부에 앵커를 두지 마십시오 NavItem. 이렇게하면 콘솔에 경고가 표시됩니다.

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

NavItem렌더링 될 때 앵커 (의 직계 자식 NavItem)가 이미 존재하기 때문입니다.

위의 경고로 인해 react는 두 앵커를 형제로 취급해야하므로 스타일 문제가 발생했습니다.

react-router-bootstrap 에서 LinkContainer 를 사용 하는 것이 좋습니다. 다음 코드가 작동합니다.

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>

이것은이 문제를 인터넷 검색 할 때 미래의 자신에 대한 메모입니다. 다른 사람이 대답을 통해 도움을 받기를 바랍니다.

2020 upd :react-boostrap: 1.0.0-beta.16 및 테스트react-router-dom: 5.1.2

2019 upd : react-bootstrap v4 (현재 1.0.0-beta.5 사용) 및 react-router-dom v4 (4.3.1)로 작업하는 사용자는 Nav.Link의 "as"prop을 사용하세요. 예:

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>

다음은 작업 예제입니다 : https://codesandbox.io/s/3qm35w97kq

react-bootstrap을 사용해 보셨습니까 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>

LinkContainerreact-router-bootstrap에서 사용 을 피할 수 있습니다 . 그러나 다음 릴리스에서 componentClass될 as예정입니다. 따라서 마지막 버전 (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>

다음은 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
};

히스토리 를 사용할 수 있습니다 . 라우터로 구성 요소를 만들어야 합니다 .

App.js에서 :

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

const NavigationWithRouter = withRouter(Navigation);

//in render()
    <NavigationWithRouter />

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는 내부 NavItem 에서 현재 선택을 기반으로 활성화 된 항목을 강조 표시 하도록하려면 LinkContainer보다 나은 옵션 입니다. 수동 선택 핸들러가 필요하지 않습니다.

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>

react-bootstrap v_1.0 베타에서 "activeKey"prop으로 기능을 추가하려면 다음 형식을 사용하세요.

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