React - элемент ссылки начальной загрузки в navitem

Question

React - элемент ссылки начальной загрузки в navitem

у меня возникли некоторые проблемы с дизайном с помощью 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>

вот как это выглядит, когда он отображает.

enter image description here

Я знаю, что <Link></Link> вызывает это, но я не знаю, почему? Я хотел бы, чтобы это было в линии.

415 6

react-router react-bootstrap

6 ответов:

Comments

Ничего не найдено.

Ming · Accepted Answer · 2016-03-08 11:52:41

вы не должны ставить якорь внутри NavItem. Сделав это, вы увидите предупреждение в консоли:

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

это потому, что когда NavItem отображается якорь (прямой дочерний элемент NavItem) уже есть.

из-за предупреждения выше, react будет вынужден рассматривать два якоря как родной брат, что вызвало проблему стиля.

Gennon · Accepted Answer · 2016-04-29 11:16:55

С помощью 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>
это в основном заметка для будущего себя, когда гуглить эту проблему. Я надеюсь, что кто-то еще может извлечь пользу из ответа.

sonlexqt · Accepted Answer · 2018-07-15 17:48:28

вы пробовали использовать react-bootstrap в componentClass ?

import { Link } from 'react-router';
// ...
<Nav pullRight>
  <NavItem componentClass={Link} href="/" to="/">Home</NavItem>
  <NavItem componentClass={Link} href="/book" to="/book">Book Inv</NavItem>
</Nav>

voodooattack · Accepted Answer · 2017-07-27 13:34:41

вот решение для использования с 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
};

5ar · Accepted Answer · 2017-04-05 19:51:36

можно использовать история, просто не забудьте создать компонент маршрутизатор:

в приложение.js:

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

const NavigationWithRouter = withRouter(Navigation);

//in render()
    <NavigationWithRouter />

в навигации.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>

Sairam Krish · Accepted Answer · 2017-08-30 15:23:38

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>