Reaktor-router + reagowanie-ładowanie

Question

Jak scalić dwa, aby utworzyć pionowe menu? Mam Podstawowa konfiguracja routingu (który pracuje i pobiera renderowane jako standardowego menu poziomym):

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

Od reagować-bootstrap docs, jest to przykład dla pionowego elementu 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> 
); 

Nie wiem, jak je połączyć? Udało mi się połączyć je bez użycia reaktywnego bootstrapu, po prostu normalnego bootstrapu jak poniżej, ale to pokonało cel użycia match-bootstrap.

<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

Użyj projekt reagować-router boostrap: https://github.com/react-bootstrap/react-router-bootstrap

Answer 2

używam reagować-bootstrap zbyt i Redux, innej opcji można wziąć robi to programowo, myślę, że nie chcą używać link ponieważ przycisk wyglądał znacznie lepiej. Jeśli korzystasz z routera reagowania, możesz użyć kontekstu, aby uzyskać dostęp do historii.

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

handleClick Funkcja:

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

Jeśli trzeba strzelać skargę komponent jest odmontowywane można zrobić, to tam.

Answer 3

używam react-router-bootstrap w moim projekcie, naprawdę pomaga, aby zainstalować na temat:

npm install -S react-router-bootstrap

Wykorzystanie

Owiń reagować elementu Bootstrap w <LinkContainer> uczynić go zachowuj się jak React Router <Link>

<LinkContainer> akceptuje takie same parametry jak React routera <NavLink>

Należy pamiętać, że domyślnie React Router będzie pasować do każdego miejsca, które zawiera ścieżkę do określonego w prop. Aby dokładnie dopasować <LinkContainer> do , ustaw dokładną propę na true lub użyj zamiast niej <IndexLinkContainer>.

i jest to przykład użycia:

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

za pomocą reakcji, router bootstrap:

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