特定の兄弟コンポーネントがレンダリングされるときにReactjsスタイルのコンポーネントが異なって表示される

Question

私のApp.jsレンダリングが以下に定義されたルートで構成されているとします。<TopBar>はサイトのナビゲーションであり、ルート、そして私が達成したいのは、/:usernameがレンダリングされたときと最初の4つのコンポーネントがレンダリングされたときに異なる方法で<TopBar>コンポーネントをスタイルすることです。私は使用しないことを思い付いた

App.js 

render() { 
    return (
     <Router> 
     <div className={classnames('app_warapper', {user_app_wrapper:this.props.isAuthenticated, guest_app_wrapper: !this.props.isAuthenticated})}> 
      <div className="App"> 
      <TopBar /> 
      <Switch> 
       <Route exact path="/" component={HomePage} /> 
       <Route exact path="/login" component={LoginPage} /> 
       <Route exact path="/signup" component={SignupPage} /> 
       <Route exact path="/reset" component={ResetPasswordPage} /> 
       <Route exact path="/reset/:id" component={ResetPasswordPage} /> 
       <Route exact path="/create-username" component={isAuthenticated(UsernameCreation)} /> 
       <Route exact path="/dashboard" component={isAuthenticated(DashboardPage)} /> 
       <Route exact path="/edit-scope/:id" component={isAuthenticated(EditScope)} /> 
       <Route exact path="/profile" component={isAuthenticated(ProfilePage)} /> 
       <Route exact path="/logout" component={isAuthenticated(Logout)} /> 
       <Route exact path="/:username" component={PublicProfilePage} /> 
       <Route component={NotFound} /> 
      </Switch> 
      </div> 
     </div> 
     </Router> 
    ); 
    } 

ハックソリューション：

• 個別にすべてのコンポーネントで<TopBar>をレンダリングしPublicProfilePage
• の内側に描画されたときに別のクラス名を使用するように小道具を渡します内部のPublicProfilePageコンポーネント搭載店で<TopBar> classNames、コンポーネントのコンポーネントの継続時間を変更する マウント解除するクラス名を戻す

Answer 1

別の簡単な方法があります。

TopBarコンポーネントをwithRouter上位コンポーネントでラップします。

export default withRouter(TopBar); 

それはあなたのTopBarコンポーネントに小道具としてmatch、location、historyを注入し、コンポーネントごとにルート変更を再レンダリングします。したがって、必要に応じてこれらの小道具に基づいてコンポーネントを条件付きでレンダリングすることができます。

render() { 
    const { match, location, history } = this.props 

    return (
     //...your conditional JSX for TopBar 
    ) 
}