☰

React: 特定のルート上のコンポーネントを非表示にする 質問する

tag-icon • tag-icon reactjs react-router react-css-modules
React: 特定のルート上のコンポーネントを非表示にする 質問する

Reactを初めてご利用の方:

コンポーネント<Header />をユーザーが特定のページにアクセスした場合にのみ非表示にする。

これまでのアプリの設計では、コンポーネント<Header />はナビゲート時に再レンダリングされないページのコンテンツのみが表示されるので、非常にスムーズなエクスペリエンスが得られます。

すべてのルートのヘッダーを再レンダリングして簡単に非表示にしようとしましたが、ナビゲートするたびに醜い再レンダリングの不具合が発生します。

つまり、基本的には、特定のルートに出入りするときにのみコンポーネントを再レンダリングする方法はありますか?

そうでなければ、ベストプラクティスこの目標を達成するには？

アプリ.js:

class App extends Component {

  render() {
    return (
      <BrowserRouter>
        <div className="App">
          <Frame>
            <Canvas />
            <Header />
            <Main />
            <NavBar />
          </Frame>
        </div>
      </BrowserRouter>
    );
  }
}

メイン.js:

const Main = () => (
  <Switch>
    <Route exact activeClassName="active" path="/" component={Home} />
    <Route exact activeClassName="active" path="/art" component={Art} />
    <Route exact activeClassName="active" path="/about" component={About} />
    <Route exact activeClassName="active" path="/contact" component={Contact} />
  </Switch>
);

ベストアンサー1

私も React は初めてですが、この問題に遭遇しました。react-router受け入れられた回答の代替案としては、 を使用することです。これは、非表示にするコンポーネントをラップし、それにprop (など)withRouterを提供します。location

import { withRouter } from 'react-router-dom';    
const ComponentToHide = (props) => {
  const { location } = props;
  if (location.pathname.match(/routeOnWhichToHideIt/)){
    return null;
  }

  return (
    <ComponentToHideContent/>
  )
}

const ComponentThatHides = withRouter(ComponentToHide);

ただし、ドキュメント:

withRouter は、React Redux の connect が状態の変更に対して行うように、場所の変更をサブスクライブしません。代わりに、場所の変更がコンポーネントから伝播した後に再レンダリングします。つまり、親コンポーネントが再レンダリングされない限り、withRouter はルート遷移時に再レンダリングしません。

この警告にもかかわらず、このアプローチは、OP のユースケースと非常によく似たユースケースで私にとっては機能するようです。

おすすめ記事