У меня возникли проблемы с дизайном с помощью реакции-маршрутизатора и реакции-бутстрапа. ниже - фрагмент кода
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>
Это в основном примечание к будущему "я", когда вы запускаете эту проблему. Я надеюсь, что кто-то другой может воспользоваться ответом.
Вы пытались использовать ответный-начальный 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>
2019 upd: для тех, кто работает с response-bootstrap v4 (в настоящее время использует 1.0.0-beta.5) и response-router-dom v4 (4.3.1), просто используйте "as" проп из 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
Вот решение для использования с реактивным маршрутизатором 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
};
Вы можете использовать history, просто создайте компонент с маршрутизатором:
в 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>
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>
Вы можете избежать использования LinkContainer из реакции-маршрутизатора-начальной загрузки. Тем не менее, 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>
Чтобы добавить функциональность с помощью "activeKey" в response-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>
@alexey ответ прост и работает для меня.
Но, пытаясь добавить кнопку свертывания, я не мог понять, как заставить collapseOnSelect работать. Пользователь должен нажать на кнопку переключения, чтобы развернуть/свернуть меню, в то время как ожидаемое поведение - когда пользователь щелкает элемент, меню автоматически закрывается.
<Navbar collapseOnSelect expand="md">
{/* "Link" in brand component since just redirect is needed */}
<Navbar.Brand as={Link} to="/">
Brand link
</Navbar.Brand>
<Navbar.Toggle aria-controls="mynav" />
<Navbar.Collapse id="mynav">
<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.Collapse>
</Navbar>