使用 React Router 隐藏 Navbar 组件

Question

我正在构建一个相当大的应用程序，它有一个用户注册过程。我想在注册路线上隐藏 Navbar 组件，以便用户 100% 沉浸在注册过程中。当前设置的 Navbar 组件位于 Switch 标签和所有路由之前。

我尝试添加 CSS 以隐藏注册路线上的导航栏，但它会自动应用于整个应用程序，这不是我想要的。任何其他建议将不胜感激。

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

您的应用程序应该有一些 Auth flow。

Sign up - 注册用户；
登录-登录用户；
注销 - 注销用户；
状态 - 检查授权状态，用户是否登录。

在应用程序内部，您需要具有全局身份验证状态。一些简单的对象：

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

如果您有任何全局授权状态，那么只需使用它来防止渲染 NavBar 组件：

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;

Answer 2

您可以分层设计路线

第一页

您声明了所有不需要包含导航栏的路线。加上一条路线，即“/”，它是所有需要导航栏的剩余路线的基础

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

    </Switch>

在欢迎页面

包括所有需要 NavBar 和 NavBar 的路由

    <Switch> 

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

    </Switch>

使用 React Router 隐藏 Navbar 组件

Hiding Navbar component with with React Router

navigation

navbar

reactjs

react-router