Mục liên kết React-Bootstrap trong navitem

Tôi đang gặp một số vấn đề về kiểu dáng khi sử dụng react-router và react-bootstrap. dưới đây là một đoạn mã

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>

Đây là những gì nó trông như thế nào khi nó hiển thị.

Tôi biết đó <Link></Link>là nguyên nhân nhưng tôi không biết tại sao? Tôi muốn cho điều này được trong dòng.

Bạn không nên đặt neo bên trong NavItem. Bằng cách này, bạn sẽ thấy cảnh báo trong bảng điều khiển:

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

Đó là bởi vì khi NavItemđược hiển thị, một mỏ neo (con trực tiếp của NavItem) đã ở đó.

Do cảnh báo ở trên, react sẽ buộc phải coi hai anchor là anh em ruột, điều này gây ra vấn đề về kiểu dáng.

Sử dụng LinkContainer từ react -router-bootstrap là cách tốt nhất. Đoạn mã sau sẽ hoạt động.

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>

Đây chủ yếu là một lưu ý cho bản thân trong tương lai, khi googling vấn đề này. Tôi hy vọng ai đó khác có thể hưởng lợi từ câu trả lời.

Cập nhật năm 2020: được thử nghiệm với react-boostrap: 1.0.0-beta.16vàreact-router-dom: 5.1.2

Cập nhật 2019: đối với những người đang làm việc với react-bootstrap v4 (hiện đang sử dụng phiên bản 1.0.0-beta.5) và react-router-dom v4 (4.3.1) chỉ cần sử dụng "as" từ Nav.Link, đây là đầy đủ thí dụ:

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>

Đây là ví dụ hoạt động: https://codesandbox.io/s/3qm35w97kq

Bạn đã thử sử dụng react-bootstrap's componentClasschưa?

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>

Bạn có thể tránh sử dụng LinkContainertừ react-router-bootstrap. Tuy nhiên, componentClasssẽ trở thành astrong bản phát hành tiếp theo. Vì vậy, bạn có thể sử dụng đoạn mã sau cho phiên bản mới nhất (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>

Đây là một giải pháp để sử dụng với 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
};

Bạn có thể sử dụng lịch sử , chỉ cần đảm bảo tạo thành phần với bộ định tuyến :

trong App.js:

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

const NavigationWithRouter = withRouter(Navigation);

//in render()
    <NavigationWithRouter />

trong 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 là một lựa chọn tốt hơn LinkContainer nếu bạn muốn NavItem bên trong làm nổi bật cái nào đang hoạt động dựa trên lựa chọn hiện tại. Không cần trình xử lý lựa chọn thủ công

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>

Để thêm chức năng với phần mềm hỗ trợ "activeKey" trong phiên bản beta react-bootstrap v_1.0, hãy sử dụng định dạng sau:

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