react-router-bootstrap linkcontainer

Question

如何使用react-router-bootstrap鏈接到另一個反應組件？我是否需要首先使用react-router設置我的路由？我不知道如何使用react-router-bootstrap的LinkContainer將NavItem路由到單獨的反應組件。

import React, { Component } from 'react'; 
 
import { Navbar, Nav, NavItem, NavDropdown, MenuItem } from 'react-bootstrap'; 
 
import request from 'superagent'; 
 
import CardList from './CardList.jsx'; 
 
import AddNewCard from './AddNewCard.jsx'; 
 
import ReactRouterBootstrap, { LinkContainer } from 'react-router-bootstrap'; 
 

 
const propTypes = { 
 
    children: React.PropTypes.element, 
 
} 
 

 
class App extends Component { 
 
    constructor(props) { 
 
    super(props); 
 
    this.state = { 
 
     cards: [], 
 
    } 
 
    this.addNewCardHandler = this.addNewCardHandler.bind(this); 
 
    this.deleteCardHandler = this.deleteCardHandler.bind(this); 
 
    this.saveButtonHandler = this.saveButtonHandler.bind(this); 
 
    } 
 

 
    componentDidMount() { 
 
    this.getAllCards(); 
 
    } 
 

 
    getAllCards() { 
 
    const url = '/api/cards'; 
 
    request.get(url) 
 
    .end((err,res) => { 
 
     if (err) { 
 
     console.log(`err: ${err}`); 
 
     } 
 
     this.setState({ 
 
     cards: res.body, 
 
     }); 
 
    }); 
 
    } 
 
    deleteCardHandler(id) { 
 
    console.log(`id: ${id}`); 
 
    } 
 
    addNewCardHandler() { 
 
    request.post(url) 
 
     .send({ 
 
     firstname, 
 
     lastname, 
 
     email, 
 
     phonenumber, 
 
     location, 
 
     jobtitle, 
 
     company, 
 
     githubhandle, 
 
     linkedinhandle, 
 
     twitterhandler, 
 
     personalsite, 
 
     }) 
 
     .end((err, res) => { 
 
     console.log(`res: ${res}`); 
 
     console.log(`err: ${err}`); 
 
     }) 
 
    } 
 

 
    saveButtonHandler(){ 
 
    console.log('saveButtonHandler') 
 
    } 
 
    render() { 
 
    return (
 
     <div> 
 
     <Navbar inverse collapseOnSelect> 
 
      <Navbar.Header> 
 
      <Navbar.Brand> 
 
       <a href="#">BIZIT</a> 
 
      </Navbar.Brand> 
 
      </Navbar.Header> 
 
      <Navbar.Collapse> 
 
      <Nav> 
 
       <NavItem eventKey={1} href="#">Filter</NavItem> 
 
       <NavItem eventKey={2} href="#">Search</NavItem> 
 
      </Nav> 
 
      <Nav pullRight> 
 
       <NavItem eventKey={1} href="#">Sign Up</NavItem> 
 
       <NavItem eventKey={2} href="#">Login</NavItem> 
 
      </Nav> 
 
      </Navbar.Collapse> 
 
     </Navbar> 
 
     <CardList 
 
      saveButtonHandler={this.saveButtonHandler} 
 
      cards={this.state.cards} 
 
      /> 
 
     <Navbar inverse collapseOnSelect fixedBottom> 
 
      <Navbar.Collapse> 
 
      <Nav> 
 
       <NavItem eventKey={4} href="#">Home</NavItem> 
 
       <NavItem eventKey={5} href="#">Profile</NavItem> 
 
       <LinkContainer to="/AddNewCard"> 
 
       <NavItem eventKey={6}>Add Card</NavItem> 
 
       </LinkContainer> 
 
       <NavItem eventKey={7} href="#">Saved Cards</NavItem> 
 
      </Nav> 
 
      </Navbar.Collapse> 
 
     </Navbar> 
 
     </div> 
 
    ) 
 
    } 
 

 
} 
 

 
App.propTypes = propTypes; 
 
export default App;

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

Answer 1

我只是在這裏面臨着同樣的問題。是的，你必須設置react-router，就好像你沒有使用react-router-bootstrap一樣。對於你的應用程序（猜測你只是想用NavItens設置相同級別的路徑），我認爲它會是這樣的（假設你正在渲染你的應用程序的組件在ID =「應用程序」）：

ReactDOM.render((
<Router history={browserHistory}> 
    <Route path="/" component={App}> 
     <IndexRoute component={Home} /> 
     <Route path="/Filter" component={Filter} /> 
     <Route path="/Signup" component={Signup} /> 
     <Route path="/Login" component={Login} /> 
     <Route path="/Profile" component={Profile} /> 
     <Route path="/Search" component={Search} /> 
     <Route path="/AddNewCard" component={AddNewCard} /> 
     <Route path="/SavedCard" component={SavedCard} /> 
    </Route> 
</Router> 
), document.getElementById('app')) 

您必須將react-bootstrap的NavItens放入react-router-bootstrap的LinkContainers中。如果您有索引鏈接，則應該使用IndexLinkContainers。但是，如果你想在你的Navbar.Brand（這是你的情況）中的一個鏈接，我發現的最好的解決方案是用className ='nav-bar-brand'替換反應路由器Link的Navbar.Brand。

這是我想你的解決方案應該是：

<Navbar inverse collapseOnSelect> 
     <Navbar.Header> 
     <Link to='#' className='navbar-brand'>BIZIT</Link> 
     </Navbar.Header> 
     <Navbar.Collapse> 
     <Nav> 
      <LinkContainer to="Filter"> 
       <NavItem eventKey={1}>Filter</NavItem> 
      </LinkContainer> 
      <LinkContainer to="Search"> 
       <NavItem eventKey={2}>Search</NavItem> 
      </LinkContainer> 
     </Nav> 
     <Nav pullRight> 
      <LinkContainer to="/Signup"> 
       <NavItem eventKey={1}>Sign Up</NavItem> 
      </LinkContainer> 
      <LinkContainer to="/Login"> 
       <NavItem eventKey={2}>Login</NavItem> 
      </LinkContainer> 
     </Nav> 
     </Navbar.Collapse> 
    </Navbar> 
    <CardList 
     saveButtonHandler={this.saveButtonHandler} 
     cards={this.state.cards} 
     /> 
    <Navbar inverse collapseOnSelect fixedBottom> 
     <Navbar.Collapse> 
     <Nav> 
      <LinkContainer to="/"> 
       <NavItem eventKey={4}>Home</NavItem> 
      </LinkContainer> 
      <LinkContainer to="/Profile"> 
       <NavItem eventKey={5}>Profile</NavItem> 
      </LinkContainer> 
      <LinkContainer to="/AddNewCard"> 
      <NavItem eventKey={6}>Add Card</NavItem> 
      </LinkContainer> 
      <LinkContainer to="/SavedCard"> 
       <NavItem eventKey={7}>Saved Cards</NavItem> 
      </LinkContainer> 
     </Nav> 
     </Navbar.Collapse> 
    </Navbar>