javascript - react 路由器引导链接容器

Question

如何使用 react-router-bootstrap 链接到另一个 React 组件？我需要先用 react-router 设置我的路由吗？我不知道如何使用 react-router-bootstrap 的 LinkContainer 将 NavItem 路由到单独的 React 组件。

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-bootstrap 一样设置 react-router。对于您的应用程序(猜测您只想要与您设置的 NavItens 相同级别的路径)我认为它会是这样的(假设您在 id="app"的 div 中呈现您的应用程序组件):

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 中添加一个链接(这是你的情况)，我找到的最好的解决方案是将 Navbar.Brand 替换为带有 className='nav-bar-brand' 的 react-router Link。

我猜你的解决方案应该是这样的:

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