Question

Làm cách nào để hợp nhất hai để tạo trình đơn dọc? Tôi đã có một thiết lập định tuyến cơ bản (trong đó hoạt động và được kết xuất như một menu ngang tiêu chuẩn):

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

Từ phản ứng-bootstrap tài liệu, có ví dụ này cho một yếu tố Nav dọc:

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

Tôi đang bối rối làm thế nào để có được cả hai người trong số họ với nhau? Tôi quản lý để đặt chúng lại với nhau mà không sử dụng phản ứng-bootstrap, chỉ bootstrap bình thường như dưới đây, nhưng mà đánh bại mục đích của việc sử dụng phản ứng-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

Sử dụng các dự án phản ứng-router-boostrap: https://github.com/react-bootstrap/react-router-bootstrap

Answer 2

Tôi đang sử dụng phản ứng-bootstrap quá và Redux, một tùy chọn mà bạn có thể mất được làm điều này lập trình, tôi nghĩ rằng tôi không muốn sử dụng Liên kết bởi vì một nút trông khá hơn thế. Nếu bạn đang sử dụng bộ định tuyến phản ứng, bạn có thể sử dụng ngữ cảnh để truy cập lịch sử của mình.

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

HandleClick Chức năng:

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

Nếu bạn cần phải bắn một hành động trước khi các thành phần được umounted bạn có thể làm nó ở đó.

Answer 3

tôi sử dụng react-router-bootstrap trong dự án của tôi, thực sự giúp đỡ, để cài đặt làm:

npm install -S react-router-bootstrap

Cách sử dụng

Quấn yếu tố Phản ứng Bootstrap của bạn trong một <LinkContainer> để làm cho nó hoạt động giống như Bộ định tuyến phản ứng <Link>

<LinkContainer> chấp nhận cùng thông số như Phản ứng Router của <NavLink>

Xin lưu ý rằng theo mặc định Phản ứng Router sẽ phù hợp với bất kỳ vị trí đó chứa đường dẫn cụ thể để chống đỡ. Để làm cho <LinkContainer> khớp với chính xác vị trí, hãy đặt chính xác giá trị đặt thành đúng hoặc sử dụng <IndexLinkContainer> thay thế.

và đây là ví dụ về việc sử dụng:

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

Sử dụng phản ứng-router-bootstrap:

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