react-router-bootstrap 链接容器 [英] react-router-bootstrap linkcontainer

查看：46
本文介绍了react-router-bootstrap 链接容器的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

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

import React, { Component } from 'react';导入 { Navbar, Nav, NavItem, NavDropdown, MenuItem } from 'react-bootstrap';来自超级代理"的导入请求；从 './CardList.jsx' 导入 CardList；从'./AddNewCard.jsx'导入AddNewCard；导入 ReactRouterBootstrap, { LinkContainer } from 'react-router-bootstrap';const propTypes = {孩子:React.PropTypes.element，}类 App 扩展组件 {构造函数(道具){超级(道具)；this.state = {卡片:[]，}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) => {如果(错误){console.log(`err: ${err}`);}this.setState({卡片:res.body，});});}deleteCardHandler(id) {console.log(`id: ${id}`);}addNewCardHandler() {request.post(网址).发送({名，姓，电子邮件，电话号码，地点，职称，公司，github句柄，链接的句柄，推特处理程序，个人网站，}).end((err, res) => {console.log(`res: ${res}`);console.log(`err: ${err}`);})}保存按钮处理程序(){console.log('saveButtonHandler')}使成为() {返回 (<div><Navbar inverse collapseOnSelect><Navbar.Header><Navbar.Brand><a href="#">BIZIT</a></Navbar.Brand></Navbar.Header><Navbar.Collapse><导航><NavItem eventKey={1} href="#">过滤器</NavItem><NavItem eventKey={2} href="#">搜索</NavItem></导航><Nav pullRight><NavItem eventKey={1} href="#">注册</NavItem><NavItem eventKey={2} href="#">登录</NavItem></导航></Navbar.Collapse></导航栏><卡片列表saveButtonHandler={this.saveButtonHandler}卡片={this.state.cards}/><Navbar inverse collapseOnSelect fixedBottom><Navbar.Collapse><导航><NavItem eventKey={4} href="#">Home</NavItem><NavItem eventKey={5} href="#">个人资料</NavItem><LinkContainer to="/AddNewCard"><NavItem eventKey={6}>添加卡片</NavItem></LinkContainer><NavItem eventKey={7} href="#">保存的卡片</NavItem></导航></Navbar.Collapse></导航栏>

)}}App.propTypes = propTypes;导出默认应用；

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

解决方案

我刚刚在这里遇到了同样的问题.是的，你必须像没有使用 react-router-bootstrap 一样设置 react-router.对于您的应用程序(猜测您只想要与您设置的 NavItens 相同级别的路径)，我认为它将是这样的(假设您在 id="app" 的 div 中呈现应用程序的组件):

ReactDOM.render((<路由器历史={browserHistory}><Route path="/" component={App}><IndexRoute 组件={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" 组件={SavedCard}/></路线></路由器>), document.getElementById('app'))

你必须将 react-bootstrap 的 NavItens 放在 react-router-bootstrap 的 LinkContainers 中.如果您有索引链接，则应改用 IndexLinkContainers.但是，如果您想要 Navbar.Brand 中的链接(这就是您的情况)，我发现的最佳解决方案是将 Navbar.Brand 替换为带有 className='nav-bar-brand' 的 react-router 链接.

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

<Navbar.Header><Link to='#' className='navbar-brand'>BIZIT</Link></Navbar.Header><Navbar.Collapse><导航><NavItem eventKey={1}>过滤器</NavItem></LinkContainer><NavItem eventKey={2}>搜索</NavItem></LinkContainer></导航><Nav pullRight><NavItem eventKey={1}>注册</NavItem></LinkContainer><LinkContainer to="/Login"><NavItem eventKey={2}>登录</NavItem></LinkContainer></导航></Navbar.Collapse></导航栏><卡片列表saveButtonHandler={this.saveButtonHandler}卡片={this.state.cards}/><Navbar inverse collapseOnSelect fixedBottom><Navbar.Collapse><导航><NavItem eventKey={4}>Home</NavItem></LinkContainer><LinkContainer to="/Profile"><NavItem eventKey={5}>个人资料</NavItem></LinkContainer><LinkContainer to="/AddNewCard"><NavItem eventKey={6}>添加卡片</NavItem></LinkContainer><LinkContainer to="/SavedCard"><NavItem eventKey={7}>保存的卡片</NavItem></LinkContainer></导航></Navbar.Collapse></导航栏>

How do I use react-router-bootstrap to link to another react component? Do I need to set up my routes with react-router first? I don't know how to use react-router-bootstrap's LinkContainer to route a NavItem to a separate react component.

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>

解决方案

I just faced the same problem here. Yes you do have to set up react-router as if you were not using react-router-bootstrap. For your application (guessing you just want same level paths with the NavItens u set) I think it will be something like this (assuming that you're rendering your app's component in a div with id="app"):

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

You have to put react-bootstrap's NavItens inside react-router-bootstrap's LinkContainers. If you have an index link you should use IndexLinkContainers instead. But if you want a link in your Navbar.Brand(which is your case), the best solution I found was to replace the Navbar.Brand for a react-router Link with className='nav-bar-brand'.

This is how I guess your solution should be:

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

这篇关于react-router-bootstrap 链接容器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆