當渲染特定的同級組件時，Reactjs樣式組件的顯示方式不同

Question

說我的App.js渲染由以下定義的路徑組成，<TopBar>是網站的導航並且它在頁面上呈現，而不管上面定義的渲染路線如何路線以及我想要完成的是在呈現/:username時與渲染前4個組件時組件的不同風格。

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> 
    ); 
    } 

哈克解決方案，我想出了，我不希望使用：裏面PublicProfilePage

渲染時

• 渲染中的每個組件<TopBar>單獨和道具傳遞給它使用不同的類名裏面PublicProfilePage的元件安裝店<TopBar> 類名，改變他們對組件的持續時間，在部分 得到卸除設置的類名後面

Answer 1

還有一種簡單的替代。

與withRouter高次成分包裝你TopBar組件。

export default withRouter(TopBar); 

它會注入match，location，history當道具你TopBar組件，並重新渲染時每次路由變化的組件。因此，您可以根據需要有條件地渲染基於這些道具的組件。

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

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