React-navitemのブートストラップリンクアイテム


85

react-routerとreact-bootstrapを使用してスタイリングの問題が発生しています。以下はコードのスニペットです

import { Route, RouteHandler, Link } from 'react-router';
import AuthService from '../services/AuthService'
import { Button, Nav, Navbar, NavDropdown, MenuItem, NavItem } from 'react-bootstrap';

    <Nav pullRight>
      <NavItem eventKey={1}>
        <Link to="home">Home</Link>
      </NavItem>
      <NavItem eventKey={2}>
        <Link to="book">Book Inv</Link>
      </NavItem>
      <NavDropdown eventKey={3} title="Authorization" id="basic-nav-dropdown">
        <MenuItem eventKey="3.1">
          <a href="" onClick={this.logout}>Logout</a>
        </MenuItem>          
      </NavDropdown>  
    </Nav>

これは、レンダリングしたときの外観です。

ここに画像の説明を入力してください

<Link></Link>はこれを引き起こしていることを知っていますが、理由はわかりませんか?これをインラインにしたいと思います。

回答:


6

アンカーを中に入れないでくださいNavItem。これを行うと、コンソールに警告が表示されます。

Warning: validateDOMNesting(...): <a> cannot appear as a descendant of <a>. See Header > NavItem > SafeAnchor > a > ... > Link > a.

これNavItemは、レンダリングされたときにアンカー(の直接の子NavItem)がすでに存在するためです。

上記の警告により、reactは2つのアンカーを兄弟として扱うことを余儀なくされ、スタイルの問題が発生しました。


4
私はlinkcontainerを使用することになりました
チャドシュミット2016年

3
例を挙げていただけますか?
Paschalidis Christos

5
受け入れられた答えではなく、2番目の答えによって問題が解決されるのは私だけです。
Ejaz Karim 2017

1
@chadschmidtに受け入れ答えを変更してくださいstackoverflow.com/a/36933127/1826429
ゴールディー

245

react-router-bootstrapからLinkContainerを使用するのが良い方法です。次のコードが機能するはずです。

import { Route, RouteHandler, Link } from 'react-router';
import AuthService from '../services/AuthService'
import { Button, Nav, Navbar, NavDropdown, MenuItem, NavItem } from 'react-bootstrap';
import { LinkContainer } from 'react-router-bootstrap';

/// In the render() method
<Nav pullRight>
  <LinkContainer to="/home">
    <NavItem eventKey={1}>Home</NavItem>
  </LinkContainer>
  <LinkContainer to="/book">
    <NavItem eventKey={2}>Book Inv</NavItem>
  </LinkContainer>
  <NavDropdown eventKey={3} title="Authorization" id="basic-nav-dropdown">
    <LinkContainer to="/logout">
      <MenuItem eventKey={3.1}>Logout</MenuItem>    
    </LinkContainer>      
  </NavDropdown>  
</Nav>

これは主に、この問題をグーグルで検索するときの将来の自己へのメモです。他の誰かがその答えから恩恵を受けることを願っています。



4
activeClassNameを切り替えるのはどうですか?
Anyul Rivas 2016

これを機能させることができない場合は、パスがReactRouterに含まれていることを確認してください。
Anant Simran Singh 2016

8
これは、「アクティブな」スタイルをNavItemsに適用できません。
ダニエルアラント2017

1
active / activeKeyが機能しない問題を解決する回答を以下に追加しました。react-bootstrap v_1.0ベータでも動作します!(通常のバージョンで使用するには、NavItemからNav.Itemをサブアウトするなど)
Young Scooter

49

2020 upd:テスト済みreact-boostrap: 1.0.0-beta.16およびreact-router-dom: 5.1.2

2019 upd: react-bootstrap v4(現在1.0.0-beta.5を使用)とreact-router-dom v4(4.3.1)を使用している場合は、Nav.Linkの「as」プロップを使用してください。例:

import { Link, NavLink } from 'react-router-dom'
import { Navbar, Nav } from 'react-bootstrap'

<Navbar>
  {/* "Link" in brand component since just redirect is needed */}
  <Navbar.Brand as={Link} to='/'>Brand link</Navbar.Brand>
  <Nav>
    {/* "NavLink" here since "active" class styling is needed */}
    <Nav.Link as={NavLink} to='/' exact>Home</Nav.Link>
    <Nav.Link as={NavLink} to='/another'>Another</Nav.Link>
    <Nav.Link as={NavLink} to='/onemore'>One More</Nav.Link>
  </Nav>
</Navbar>

これが実際の例です:https//codesandbox.io/s/3qm35w97kq


試してみましたが、「as = {NavLink}」では機能しません。
lannyboy

1
これは、react-bootstrap1およびreact16.8を使用するreactrouter v5で機能します
proc

私はVue.jsから来ました。ここでは、boostrap vueが単に「to」パラメーターを実装および管理しているので、はるかに簡単です。とにかくヒントをありがとう、それは大いに役立ちました!
egdavid

1
このソリューションはをサポートしているため、LinkContainerfromの代わりにこのソリューションを使用してください。react-router-bootstrapactiveClassName
takasoft

@Alexeyありがとうございます。LinkContainerを機能させるために何時間も費やし、その後この答えを見つけました。
デビッドイーズリー

31

react-bootstrapを使用してみましたcomponentClassか?

import { Link } from 'react-router';
// ...
<Nav pullRight>
  <NavItem componentClass={Link} href="https://stackoverflow.com/" to="/">Home</NavItem>
  <NavItem componentClass={Link} href="https://stackoverflow.com/book" to="/book">Book Inv</NavItem>
</Nav>

1
これはうまくいきます!スタイリングの問題はなく、オーバーライドが必要な他の回答よりもはるかに単純です。href/ toの繰り返しを避けるために、HoCでオーバーライドすることもできます。
ティムリンド

1
これはとてもきれいなので、今は外部リンクに「ターゲットブランク」を使用して使用し、非常にうまく機能しています。ありがとう
Saulo Gomes 2018

1
これは、別のパッケージを含める必要がなく、より優れています。
sbk201 2018

2
1.0.0-beta.5にアップグレードしました。彼らはcomponentClassのサポートを削除したようです:(
Nate-BitInt19年

12

あなたはLinkContainerreact-router-bootstrapからの使用を避けることができます。ただし、次のリリースcomponentClassになるas予定です。したがって、最後のバージョン(v1.0.0-beta)には次のスニペットを使用できます。

<Nav>
    <Nav.Link as={Link} to="/home" >
        Home
    </Nav.Link>
    <Nav.Link as={Link} to="/book" >
        Book Inv
    </Nav.Link>
    <NavDropdown title="Authorization" id="basic-nav-dropdown">
        <NavDropdown.Item onClick={props.logout}>
            Logout
        </NavDropdown.Item>
    </NavDropdown>
</Nav>

5

これがreact-router4で使用するためのソリューションです。

import * as React from 'react';

import { MenuItem as OriginalMenuItem, NavItem as OriginalNavItem } from 'react-bootstrap';

export const MenuItem = ({ href, ...props }, { router }) => (
  <OriginalMenuItem onClick={e => {e.preventDefault();router.transitionTo(href)}} href={href} {...props}/>
);

MenuItem.contextTypes = {
  router: React.PropTypes.any
};

export const NavItem = ({ href, ...props }, { router }) => (
  <OriginalNavItem onClick={e => {e.preventDefault();router.transitionTo(href)}} href={href} {...props}/>
);

NavItem.contextTypes = {
  router: React.PropTypes.any
};

使用router.transitionTo(href)する代わりにrouter.history.push(href)
Devasatyam 2017

2

履歴を使用でき ますルーターを使用してコンポーネントを作成してください。

App.jsの場合:

// other imports
import {withRouter} from 'react-router';

const NavigationWithRouter = withRouter(Navigation);

//in render()
    <NavigationWithRouter />

Navigation.jsの場合:

//same code as you used before, just make an onClick event for the NavItems instead of using Link

<Nav pullRight>
  <NavItem eventKey={1} onClick={ e => this.props.history.push("/home") } >
    Home
  </NavItem>
  <NavItem eventKey={2} onClick={ e => this.props.history.push("/book") } >
    Book Inv
  </NavItem>
</Nav>

2

現在の選択に基づいて内部のNavItemでアクティブなもの強調表示する場合は、IndexLinkContainerがLinkContainerよりも優れたオプションです。手動選択ハ​​ンドラーは必要ありません

import { IndexLinkContainer } from 'react-router-bootstrap';
....

//Inside render
<Nav bsStyle="tabs" >
  <IndexLinkContainer to={`${this.props.match.url}`}>
    <NavItem >Tab 1</NavItem>
  </IndexLinkContainer>
  <IndexLinkContainer to={`${this.props.match.url}/tab-2`}>
    <NavItem >Tab 2</NavItem>
  </IndexLinkContainer>
  <IndexLinkContainer to={`${this.props.match.url}/tab-3`}>
    <NavItem >Tab 3</NavItem>
  </IndexLinkContainer>
</Nav>

タブを使用していませんが、ナビゲーションバーのリンクをアクティブとして強調表示したいと思います。IndexLinkContainerを使用してみましたが、指定どおりに機能しません。ルートに直接行くと、正しいルートが強調表示されますが、リンクをクリックしただけでは強調表示されません。
Thomas Le

ところで、どうやって見つけたのIndexLinkContainerですか?...カントードキュメント内のどこにでもそれを見つけることができませんでした
Thiemグエン

@ThomasLe使用しているコンポーネントとPureComponentを確認してください。コンポーネントに切り替えることで、いくつかの更新された問題が修正されました
FrozenKiwi 2018

0

react-bootstrap v_1.0ベータ版で「activeKey」プロップを使用して機能を追加するには、次の形式を使用します。

<Nav activeKey={//evenKey you want active}>
    <Nav.Item>
        <LinkContainer to={"/home"} >
            <Nav.Link eventKey={//put key here}>
                {x.title}
            </Nav.Link>
        </LinkContainer>
    </Nav.Item>
    //other tabs go here
</Nav>
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.