web-dev-qa-db-ja.com

React：特定のルートでコンポーネントを非表示にする

Reactの新機能：

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

これまでにアプリを設計した方法は、<Header />コンポーネントはナビゲート時に再レンダリングされません、ページコンテンツのみなので、本当にスムーズなエクスペリエンスを提供します。

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

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

そうでない場合、この目標を達成するためのベストプラクティスは何でしょうか？

App.js：

class App extends Component {

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

Main.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>
);
reactjsreact-routerreact-css-modules
5
Yannick

状態に依存して再レンダリングを行うことができます。

ルートshouldHideから移動する場合、this.setState({ hide: true })

あなたの_<Header>_をレンダーで条件付きでラップすることができます：

_{
  !this.state.hide &&
  <Header>
}
_

または、関数を使用できます。

__header = () => {
  const { hide } = this.state
  if (hide) return null
  return (
    <Header />
  )
}
_

そしてrenderメソッドで：

_{this._header()}
_

私はreact-routerを試していませんが、次のようなものが機能する可能性があります。

_class App extends Component {

  constructor(props) {
    super(props)
    this.state = {
      hide: false
    }
  }

  toggleHeader = () => {
    const { hide } = this.state
    this.setState({ hide: !hide  })
  }

  render() {

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

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

そして、Art内の関数を手動で呼び出す必要があります。

this.props.hideHeader()

3
Dan

（正確でないパスを宣言することによって）すべてのルートに追加して、特定のパスで非表示にすることができます。

<Route path='/' component={Header} /> // note, no exact={true}

次に、Header renderメソッドで：

render() {
  const {match: {url}} = this.props;

  if(url.startWith('/your-no-header-path') {
    return null;
  } else {
    // your existing render login
  }
}
2
Meir