Hiding Navbar component with with React Router

Question

I am building a rather large application that has a user registration process to it. I would like to hide the Navbar component on the registration routes so that the user is 100% immersed in the registration process. The current setup has the Navbar component coming before the Switch tags and all the Routes.

I tried adding CSS to hide the Navbar on the registration routes but it is automatically applied across the Application, which is not something I want. Any other suggestions would be much appreciated.

class App extends Component {
  render(props) {
    return (

      <Router {...props}>
        <ScrollToTop>
          <div>

            <NavBar/>
            <Switch>
              {/*Before Signing In*/}
              <Route exact path="/" component={PlaceholderPage}/>
              <Route exact path="/join" component={PlaceholderPage}/>
              <Route exact path="/about" component={AboutPage}/>
              {/*Sign In / Registration Flow*/}
              <Route exact path="/signin" component={SignIn}/>
              <Route exact path="/signup" component={SignUp}/>
              <Route exact path="/signup2" component={SignUp2}/>
              {/*Home*/}
              <Route path="/home" component={Home}/>
              {/*Career Path*/}
              <Route path="/careerPath" component={CareerPathPage}/>
              <Route path="/careerDetail/:career" component={CareerDetailPage}/>
              {/*User*/}
              <Route exact path="/user/:userid" component={UserProfile}/>
              {/*Career Forum*/}
              <Route exact path="/forum" component={CareerForumOverviewPage}/>
              <Route exact path="/forum/:topic" component={CareerForum}/>
              <Route path="/posts" component={Posts}/>
              <Route exact path="/forum/:topic/add-post" component={AddPost}/>
              <Route exact path='/forum/:topic/:thread' component={Thread}/>
              <Route exact path="/forum/:topic/:thread/add-post" component={AddComment}/>
              <Route exact path="/forum/:topic/:thread/reply" component={AddComment}/>
              {/*Job Post Insight*/}
              <Route exact path="/jobPostInsights" component={JobPostInsights}/>
              <Route exact path="/jobPostInsightExample" component={JobPostInsightExample}/>

            </Switch>

          </div>
        </ScrollToTop>
      </Router>
    );
  }
}

export default App;

Answer 1

You can design your routes in a hierarchical way

In the first page

You declare all the routes that dont need to include navbar. Plus one route which is '/' which is the base for all remaining routes that require navbar

    <Switch>
                  <Route exact path="/register" component={RegisterPage}/>
                  <Route path='/' compoent={WelcomePage}>

    </Switch>

In WelcomePage

Include all the routes which required NavBar along with NavBar

    <Switch> 

          <NavBar/>
          <Route path="/home" component={Home}/>
          <Route path="/careerPath" component={CareerPathPage}/>
          <Route path="/careerDetail/:career" component={CareerDetailPage}/>

    </Switch>

Answer 2

Your application should have some Auth flow.

1. Sign up - register user;
2. Sign in - login user;
3. Sign out - logout user;
4. Status - check authorisation status, is user logged in or not.

Inside application you need to have global auth state. Some simple object:

{
 "authorised": true,
 "user": {
    "name": 'John Doe',
    "age": 25
 }
}

If you have any global authorisation state then just use it to prevent render NavBar component:

class App extends Component {
  render(props) {
    const { auth: authorised } = props;
    return (

      <Router {...props}>
        <ScrollToTop>
          <div>

            {authorised && <NavBar/>}
            <Switch>
              {/*Before Signing In*/}
              <Route exact path="/" component={PlaceholderPage}/>
              <Route exact path="/join" component={PlaceholderPage}/>
              <Route exact path="/about" component={AboutPage}/>
              {/*Sign In / Registration Flow*/}
              <Route exact path="/signin" component={SignIn}/>
              <Route exact path="/signup" component={SignUp}/>
              <Route exact path="/signup2" component={SignUp2}/>
              {/*Home*/}
              <Route path="/home" component={Home}/>
              {/*Career Path*/}
              <Route path="/careerPath" component={CareerPathPage}/>
              <Route path="/careerDetail/:career" component={CareerDetailPage}/>
              {/*User*/}
              <Route exact path="/user/:userid" component={UserProfile}/>
              {/*Career Forum*/}
              <Route exact path="/forum" component={CareerForumOverviewPage}/>
              <Route exact path="/forum/:topic" component={CareerForum}/>
              <Route path="/posts" component={Posts}/>
              <Route exact path="/forum/:topic/add-post" component={AddPost}/>
              <Route exact path='/forum/:topic/:thread' component={Thread}/>
              <Route exact path="/forum/:topic/:thread/add-post" component={AddComment}/>
              <Route exact path="/forum/:topic/:thread/reply" component={AddComment}/>
              {/*Job Post Insight*/}
              <Route exact path="/jobPostInsights" component={JobPostInsights}/>
              <Route exact path="/jobPostInsightExample" component={JobPostInsightExample}/>

            </Switch>

          </div>
        </ScrollToTop>
      </Router>
    );
  }
}

export default App;