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 =＆＃34的div中渲染你的应用程序的组件） ;应用＆＃34）：

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 =＆＃39; nav-bar-brand＆＃39的react-router链接替换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>