使用 React 路由器隐藏导航栏组件

Question

我正在构建一个相当大的应用程序，其中包含用户注册过程。我想隐藏注册路线上的导航栏组件，以便用户 100% 沉浸在注册过程中。当前设置的导航栏组件位于 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

您可以按层次结构设计路线

在第一页

声明不需要包含导航栏的所有路由。 加上一个路由，即"/"，它是所有需要导航栏的剩余路由的基础

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

在欢迎页面中

包括所有需要导航栏和导航栏的路线

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

Answer 2

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

1. 注册 - 注册用户;
2. 登录 - 登录用户;
3. 注销 - 注销用户;
4. 状态 - 检查授权状态，用户是否登录。

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

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

如果您有任何全局授权状态，则只需使用它来防止渲染导航栏组件：

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;