React-router + реакция-bootstrap

Question

Как слить два, чтобы создать вертикальное меню? У меня есть настройки основной маршрутизации (который работает и получает вынесенную в качестве стандартного горизонтального меню):

<div> 
     <Link className="p5" to='/'>Home</Link> 
     <Link className="p5" to='/Gallery'>Gallery</Link> 
     <Link className="p5" to='/Contact'>Contact</Link> 
</div> 

От реагировать-самозагрузку документов, есть этот пример для вертикального элемента Nav:

function handleSelect(selectedKey) { 
    alert('selected ' + selectedKey); 
} 

const navInstance = (
    <Nav bsStyle="pills" stacked activeKey={1} onSelect={handleSelect}> 
    <NavItem eventKey={1} href="/home">NavItem 1 content</NavItem> 
    <NavItem eventKey={2} title="Item">NavItem 2 content</NavItem> 
    <NavItem eventKey={3} disabled>NavItem 3 content</NavItem> 
    </Nav> 
); 

Я смущен, как собрать их обоих вместе? Мне удалось собрать их без использования реакции-бутстрапа, просто нормального бутстрапа, как показано ниже, но это побеждает цель использования реакции-бутстрапа.

<ul className="nav nav-pills nav-stacked"> 
     <li className="active"><Link className="p5" to='/'>Home</Link></li> 
     <li><Link className="p5" to='/Gallery'>Gallery</Link></li> 
     <li><Link className="p5" to='/Contact'>Contact</Link></li> 
</ul> 

Answer 1

Используйте проект реагировать-маршрутизатор-boostrap: https://github.com/react-bootstrap/react-router-bootstrap

Answer 2

Я использую реагировать-самозагрузки слишком и Redux, другой вариант, вы можете принять это делает программно, я думаю, что я не хочу использовать ссылку потому что кнопка выглядела намного лучше. Если вы используете интерактивный маршрутизатор, вы можете использовать контекст для доступа к своей истории.

<Button className="p5" onClick={this.handleClick}>Gallery</Button> 

HandleClick Функция:

handleClick(e) { 
    //this.props.history.push('/Gallery'); 
    this.context.router.push('/Gallery'); 
    //this.props...(); // You can fire your action here 
    } 

Если вам нужно стрелять действие до того, как компонент размонтирован вы можете сделать это здесь.

Answer 3

Я использую react-router-bootstrap в моем проекте, действительно помогает, установить делать:

npm install -S react-router-bootstrap

Использование

Оберните Реагировать Bootstrap элемент в <LinkContainer>, чтобы сделать его ведут себя как реактивный маршрутизатор <Link>

<LinkContainer> принимает те же параметры, React маршрутизатора с <NavLink>

Пожалуйста, обратите внимание, что по умолчанию Реагировать маршрутизатор будет соответствовать в любом месте, что содержит путь, указанный в подпирать. Чтобы сделать <LinkContainer>, чтобы соответствовать местоположение точно, установите точную опцию в true или используйте <IndexLinkContainer> вместо этого.

и это пример использования:

<Button href="/example">Foo</Button> 

Используя реагируют-маршрутизатор-самозагрузки:

<LinkContainer to="/example"> 
    <Button>Foo</Button> 
</LinkContainer>