呈现特定的同级组件时，ReactJS样式组件有所不同

Question

Say my App.js render consists of the routes defined below, <TopBar> is the site's navigation and it gets rendered on the page regardless of the route that gets rendered as it is defined above the routes, and what I want to accomplish is to style the <TopBar> component differently when /:username is rendered vs when the first 4 components are rendered.

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

Hacky solutions I came up with that I don't want to use:

• Render <TopBar> in every component individually and pass props to it to use different classNames when rendered inside PublicProfilePage
• Inside PublicProfilePage on component mounting store <TopBar> classNames, change them for duration of the component, on component getting dismounted set the classNames back

Answer 1

There is another simple alternative.

Wrap your TopBar component with withRouter higher-order component.

export default withRouter(TopBar);

It will inject match , location , history as props to your TopBar component and re-render the component when every time the route changes. So you can conditionally render the component based on these props as you want.

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

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