web-dev-qa-db-ja.com

React-Routerとのアクティブリンク？

React-Router（v4）を試していますが、LinkをactiveにするためにNavを起動するときに問題が発生します。 Linkタグのいずれかをクリックすると、アクティブなものが機能し始めます。ただし、/ルートで読み込まれるコンポーネントであるため、アプリが起動したらすぐにHome Linkをアクティブにしたいと思います。これを行う方法はありますか？

ここに私の現在のコードがあります：

const Router = () => (
  <BrowserRouter>
    <div>
      <Nav>
        <Link activeClassName='is-active' to='/'>Home</Link> {/* I want this to start off as active */}
        <Link activeClassName='is-active' to='/about'>About</Link>
      </Nav>

      <Match pattern='/' exactly component={Home} />
      <Match pattern='/about' exactly component={About} />
      <Miss component={NoMatch} />
    </div>
  </BrowserRouter>
)
javascriptreactjsecmascript-6react-router
53
saadq

<Link>にはactiveClassNameまたはactiveStyleプロパティがなくなりました。 react-router v4では、条件付きスタイリングを行いたい場合は <NavLink> を使用する必要があります。

const Router = () => (
  <BrowserRouter>
    <div>
      <Nav>
        <NavLink exact={true} activeClassName='is-active' to='/'>Home</NavLink>
        <NavLink activeClassName='is-active' to='/about'>About</NavLink>
      </Nav>

      <Match pattern='/' exactly component={Home} />
      <Match pattern='/about' exactly component={About} />
      <Miss component={NoMatch} />
    </div>
  </BrowserRouter>
)

正確なプロパティをホーム<NavLink>に追加しましたが、/は/aboutや他のページと一致するため、ホームリンクは常にアクティブになります。

122
worc