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) อยู่ที่นั่นแล้ว

เนื่องจากคำเตือนข้างต้นการตอบสนองจะถูกบังคับให้ปฏิบัติต่อจุดยึดทั้งสองในฐานะพี่น้องซึ่งทำให้เกิดปัญหารูปแบบ

การใช้LinkContainerจากreact-router-bootstrapเป็นวิธีที่จะไป รหัสต่อไปนี้ควรใช้งานได้

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>

นี่เป็นข้อควรทราบสำหรับตัวเองในอนาคตเมื่อ googling ปัญหานี้ ฉันหวังว่าคนอื่นอาจได้รับประโยชน์จากคำตอบนี้

อัพเดต 2020:ทดสอบด้วยreact-boostrap: 1.0.0-beta.16และreact-router-dom: 5.1.2

การอัปเดต 2019:สำหรับผู้ที่ทำงานกับ react-bootstrap v4 (ปัจจุบันใช้ 1.0.0-beta.5) และ react-router-dom v4 (4.3.1) เพียงใช้ "เป็น" prop จาก Nav.Link ที่นี่เต็ม ตัวอย่าง:

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>

คุณสามารถหลีกเลี่ยงการใช้LinkContainerจาก react-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
};

IndexLinkContainer เป็นตัวเลือกที่ดีกว่า LinkContainer หากคุณต้องการให้ NavItem ภายในเน้นว่ารายการใดใช้งานอยู่ตามการเลือกปัจจุบัน ไม่จำเป็นต้องมีตัวจัดการการเลือกด้วยตนเอง

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>

คุณสามารถใช้ ประวัติได้ แต่อย่าลืมสร้างส่วนประกอบด้วยเราเตอร์ :

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

หากต้องการเพิ่มฟังก์ชันด้วย "activeKey" prop ใน react-bootstrap v_1.0 beta ให้ใช้รูปแบบนี้:

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