रिएक्ट-बूटस्ट्रैप लिंक आइटम एक नौसिखिया में

Question 1

मैं प्रतिक्रिया-राउटर और प्रतिक्रिया-बूटस्ट्रैप का उपयोग करते हुए कुछ स्टाइलिंग मुद्दे रख रहा हूं। नीचे कोड का एक स्निपेट है

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>यह पैदा कर रहा है, लेकिन मुझे पता नहीं क्यों? मैं इसके लिए इन-लाइन होना चाहूंगा।

Question 2

आपको अंदर लंगर नहीं डालना चाहिए NavItem। ऐसा करने से आपको कंसोल में चेतावनी दिखाई देगी:

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

ऐसा इसलिए है क्योंकि जब NavItemउसे लंगर (प्रत्यक्ष बच्चा NavItem) दिया जाता है तो वह पहले से ही वहां मौजूद होता है।

उपरोक्त चेतावनी के कारण, प्रतिक्रिया को दो एंकर को भाई-बहन के रूप में व्यवहार करने के लिए मजबूर किया जाएगा, जो शैली के मुद्दे का कारण बना।

Question 3

का उपयोग करते हुए 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>

यह ज्यादातर भविष्य के स्वयं के लिए एक नोट है, जब इस मुद्दे को गुगली करते हैं। मुझे उम्मीद है कि जवाब से किसी और को फायदा हो सकता है।

Question 4

2020 अद्यतन: के साथ परीक्षण किया react-boostrap: 1.0.0-beta.16औरreact-router-dom: 5.1.2

2019 अपडेट: जो लोग प्रतिक्रिया-बूटस्ट्रैप v4 के साथ काम कर रहे हैं (वर्तमान में 1.0.0-बीटा.5 का उपयोग करके) और प्रतिक्रिया-राउटर-डोम v4 (4.3.1) केवल "का उपयोग" के रूप में "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

Question 5

क्या आपने प्रतिक्रिया-बूटस्ट्रैप का उपयोग करने की कोशिश की है 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>

Question 6

आप LinkContainerप्रतिक्रिया-राउटर-बूटस्ट्रैप से उपयोग करने से बच सकते हैं । हालांकि, अगली रिलीज में componentClassबनने जा रहा है as। तो, आप पिछले संस्करण (v1.0.0-बीटा) के लिए निम्नलिखित स्निपेट का उपयोग कर सकते हैं:

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

Question 7

यहाँ प्रतिक्रिया-रूटर 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
};

Question 8

आप इतिहास का उपयोग कर सकते हैं , बस राउटर के साथ घटक बनाना सुनिश्चित करें :

App.js में:

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

const NavigationWithRouter = withRouter(Navigation);

//in render()
    <NavigationWithRouter />

नेविगेशन में।

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

Question 9

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>

Question 10

प्रतिक्रिया-बूटस्ट्रैप v_1.0 बीटा में "activeKey" प्रोप के साथ कार्यक्षमता जोड़ने के लिए, इस प्रारूप का उपयोग करें:

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