如何在登录页面中隐藏标题组件 反应JS.

Question

我是ReactJS的新手。我想在登录页面中隐藏标题组件并显示在内页中。我有一个应用程序.js我使用了三元运算符，但不起作用。

class App extends Component {
render(){
let HideHeader = EmployeeLogin ? null : <HeaderNavContainer />
return (
<div>
<Router history={history}>
<div>                    
{HideHeader}
<Switch>
<Route path="/about" component={About} />
<Route path="/EmployeeLogin" component={EmployeeLogin} />                        
<Route path="/MyPreferences" component={MyPreferences} />                        
<Route component={PageNotFound} />
</Switch>    
</div>    
</Router>
</div>
);
}
}

如果呈现员工登录组件，我想隐藏标题导航<HeaderNavContainer />如果没有，我想展示<HeaderNavContainer />

Answer 1

在HeaderNavContainer的render方法中，您可以这样做：

render() {
if (window.location.pathname === '/EmployeeLogin') return null;
return <insert your header nav code>;
}

由于HeaderNavContainer被包装在<Router>中，因此它将在window.location.pathname更改时重新渲染。

或者，将HeaderNavContainer添加到您的About、MyPreferences等中，而不是放入App。

Answer 2

在组件中，您可以检查history.location.pathname是否等于/EmployeeLogin，然后返回 null。您可以使用withReducer获取历史对象作为道具。

render(){
if(this.props.history.location.pathname==='/EmployeeLogin'){
return null;
}   
return (//your navigation component code.)
}

Answer 3

而不是检查组件是否存在，尝试检查 URL 是否命中

在 window.location.pathname 中，您将获得当前 URL。

让 HideHeader = window.location.pathname === 'your need string' ？ null ：

Answer 4

创建一个 HideHeader 路由，该路由(有条件地(呈现嵌套路由组件的标头组件和出口组件。

import { Outlet, useLocation } from "react-router-dom";
import { Header } from "./Header";
const HideHeader = ({ hideHeaderPaths }) => {
const { pathName } = useLocation();
return (
<>
{!hideHeaderPaths.includes(pathName) && <Header />}
<Outlet />
</>
);
};

导出默认隐藏标头;

在应用程序中.js

导入您的隐藏标头.js

import HideHeader from "./common/HideHeader"
...
...
<Route element={<HideHeader hideHeaderPaths={["/login"]} />}></Route>

并将标题导入要显示的页面上

<Header />