একটি নেভিতেমে বুটস্ট্র্যাপ লিঙ্ক আইটেমটি প্রতিক্রিয়া করুন

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

প্রতিক্রিয়া-রাউটার-বুটস্ট্র্যাপ থেকে লিঙ্ককন্টেইনার ব্যবহার করার উপায়। নিম্নলিখিত কোড কাজ করা উচিত।

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 আপডেট: যারা প্রতিক্রিয়া-বুটস্ট্র্যাপ ভি 4 নিয়ে কাজ করছেন (বর্তমানে 1.0.0-বিটা 5 ব্যবহার করছেন) এবং প্রতিক্রিয়া-রাউটার-ডম ভি 4 (4.3.1) নাভ.লিংকের কাছ থেকে কেবল "হিসাবে" ব্যবহার করুন, এখানে পূর্ণ উদাহরণ:

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

আপনি যদি বর্তমান অভ্যন্তরের নির্বাচনের উপর ভিত্তি করে কোনটি সক্রিয় তা হাইলাইট করতে চাইলে অভ্যন্তরীণ ন্যাভিটেমটি লিঙ্ককন্টেইনারের চেয়ে ইনডেক্সলিংকন্টেইনার একটি ভাল বিকল্প । কোনও ম্যানুয়াল সিলেকশন হ্যান্ডলার প্রয়োজন নেই

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 9

আপনি ইতিহাস ব্যবহার করতে পারেন , কেবল রাউটার দিয়ে উপাদানটি তৈরি করতে ভুলবেন না :

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 10

প্রতিক্রিয়া-বুটস্ট্র্যাপ v_1.0 বিটাতে "অ্যাক্টিভিকে" প্রপ দিয়ে কার্যকারিতা যুক্ত করতে, এই ফর্ম্যাটটি ব্যবহার করুন:

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