web-dev-qa-db-ja.com

Reactルーター（v4）ナビゲーションバー

react-router-domのv4を使用しています

アクティブなクラスを設定できるように、ナビゲーションバーコンポーネントのthis.props.matchにアクセスする必要があります。私はreact-materializeを使用しています。 <NavItem>タグにclassName={this.props.match ? 'active' : ''}を追加したいと思います。しかし、試合にアクセスできないようです。小道具は、コンソールで印刷するたびに空のオブジェクトになります。

私のNav.js

<Navbar brand='Fuzic' href="/" className="orange darken-3" right>
  <NavItem className={this.match ? 'active' : ''} href="/devices">Devices</NavItem>
  <NavItem><Link to="/devices">Media</Link></NavItem>
  <NavItem><Link to="/devices">Alarms</Link></NavItem>
  <NavItem><Link to="/devices">Interrupts</Link></NavItem>
  <NavItem><Link to="/auth">Admin</Link></NavItem>
</Navbar>

私のApp.js

<BrowserRouter>
  <div>
    <Nav/>
    <div className="container">
      <Switch>
        <PropsRoute exact path="/" component={Auth}/>
        <PropsRoute exact path="/devices" component={Devices} devices={this.state.devices} setCurrentDevice={this.setCurrentDevice} />
        <PropsRoute path="/devices/:deviceId" component={Detail} currentDevice={this.state.currentDevice} />
        <PropsRoute path="/auth" component={Auth}/>
        <PropsRoute component={NotFound}/>
      </Switch>
    </div>
  </div> 
</BrowserRouter>

helper.js-私から渡された小道具とreact-routerから渡された小道具を組み合わせます

// Exerp From:  https://github.com/ReactTraining/react-router/issues/4105
export const renderMergedProps = (component, ...rest) => {
  const finalProps = Object.assign({}, ...rest);
  return (
    React.createElement(component, finalProps)
  );
}

export const PropsRoute = ({ component, ...rest }) => {
  return (
    <Route {...rest} render={routeProps => {
      return renderMergedProps(component, routeProps, rest);
    }}/>
  );
}

オンラインのドキュメントと記事のほとんどはv2＆3用です。 v4のドキュメントでは、これを処理する方法について詳しく説明していません。多くの人がアプリのルートをネストしました。ただし、これを行うと、フレームの印刷でコンソールにスタックオーバーフローが発生します。

これを修正して、一致するアクセスを取得するにはどうすればよいですか？

reactjsreact-routermaterialize
10
technogeek1995

Navコンポーネントで、<NavLink>の代わりにreactルーターの<Link>を使用してみてください。

<NavLink>は<Link>の特別なバージョンであり、現在のURLと一致すると、レンダリングされた要素にスタイル属性を追加します。

<NavLink>には、使用できるactiveClassNameおよびactiveStyleプロパティがありますアクティブなナビゲーションアイテムにスタイルを適用します。

たとえば、基本的なナビゲーションは次のようになります。

<nav>
    <NavLink activeStyle={{color: 'red'}} to="/foo">Foo</NavLink>
    <NavLink activeStyle={{color: 'red'}} to="/bar">Bar Group</NavLink>
    <NavLink activeStyle={{color: 'red'}} to="/another-foo">Another Foo</NavLink>
    <NavLink activeStyle={{color: 'red'}} to="/another-bar">Another Bar</NavLink>
</nav>

ここで、activeStyleは、要素がアクティブなときに要素に適用するスタイルを表します。

そして、同じ例の下でactiveClassNameを介して：

<nav>
    <NavLink activeClassName="selected" to="/foo">Foo</NavLink>
    <NavLink activeClassName="selected" to="/bar">Bar Group</NavLink>
    <NavLink activeClassName="selected" to="/another-foo">Another Foo</NavLink>
    <NavLink activeClassName="selected" to="/another-bar">Another Bar</NavLink>
</nav>

activeClassNameは、要素がアクティブなときに要素を与えるクラスです。この例では、selectedを選択します。デフォルトでは、react-router v4では、アクティブ状態のクラスはactiveです。

React-routerv4の<NavLink>の詳細を確認してください ドキュメント

6
Seyhan

React-bootstrap v4（現在1.0.0-beta.5を使用）およびreact-router-dom v4（4.3.1）を使用している場合は、Nav.Linkの「as」propを使用してください。完全な例を次に示します。

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

1
Alexey

これは私がそれを実装する方法です、それはで動作します
"react-router-dom": "^4.2.2"
"react-bootstrap": "^0.31.5"

import { Link } from 'react-router-dom';
import { NavBar, Nav, NavItem} from 'react-bootstrap';

const NavBar = ({location}) => (
    <NavBar>
        <Nav>
            <NavItem componentClass={Link} href="/artists" to="/artists" active={location.pathname === '/artists'}>Artists</NavItem>
            <NavItem componentClass={Link} href="/stages" to="/stages" active={location.pathname === '/stages'}>Stages</NavItem>
        </Nav>
    <NavBar>
// ...

ここで、locationはRouteのネイティブプロパティです： https://reacttraining.com/react-router/web/api/location

お役に立てれば。

編集：あなたがreact-materializeを使用していることに気づいたので、私の答えはおそらくあなたの質問には当てはまりません。

1
gkri

"react"： "^ 16.9.0"および "reactstrap"： "^ 8.0.1"

import { NavLink} from "react-router-dom";
import { NavbarBrand} from "reactstrap";

 <NavLink 
  className="navbar-brand"
  activeClassName="active"
  tag={NavbarBrand}
  to='/'
  >
  My App
  </NavLink>
1
Devgig