Question

对于某些组件，包括登录，注册，忘记密码和重置密码确认验证，我一直无法隐藏侧边栏和导航栏

我已经使用stackoverflow尝试了几乎所有可用的人，但是没有人能为我工作，包括[blog]：https://medium.com/@sandip21/how-to-hide-navbar-footer-on-authentication-pages-in-reactjs-40714ee1ce48，但我无法使它正常工作

这是我的app.js代码

__await__

Answer 1

我所做的只是使用let语句来限制页面中的页眉

import React, {Component} from 'react';
import {BrowserRouter as Router, Route, Switch} from 'react-router-dom';
import Head from './component/layout/Head';
import Shipped from './component/pages/Shipped';
import Warehouse from './component/pages/Warehouse';
import Assisted from './component/pages/Assisted';
import Login from './component/auth/Login'
import Profile from './component/pages/Profile';
import jwt_decode from 'jwt-decode';
import setAuthToken from './utils/setAuthToken';
import { Provider } from 'react-redux';
import PrivateRoute from './component/common/PrivateRoute';
import store from './store';

 class App extends Component {
   render(){
    let HideHeader = window.location.pathname === '/Login' && '/Reset' && '/Confirm' && '/Signup' ? null : <Head/>
        return (
            <Provider store={store}>
                <Router>
                  <div id= "main-wrapper">              
                        {HideHeader}
                        <Route path="/Login" component={Login} /> 
                        <Route path="/Warehouse" component ={Warehouse}/>
                        <Route path="/Assisted" component ={Assisted}/>
                        <Route path="/Profile" component ={Profile}/>
                        <Route exact path="/shipped" component={Shipped} />

                  </div>    
                </Router>
              </Provider>

        );
    }
 }

export default App;

Answer 2

我认为您使代码过于复杂，下面将介绍一些步骤。

创建一个名为<Wrapper>的组件，这应该处理标题责任。只需将其包装在所需的每个UI中即可。您正在构建一个变量，该变量增加了代码重复，如果您有20个没有标题的视图，则可能会导致性能问题。

<Wrapper />：

const Wrapper = ({ children }) => (
  <>
    <Head />

    {children}
  </>
);

另一方面，我认为提取数据和jsx可以简化测试，如果操作正确，则可以简化代码审查！

这就是我要处理的路线

routes.js：

// Import routes here...

const routes = [
  {
    path: "Login",
    component: Login
  },
  {
    path: "Reset",
    component: Reset
  },
  {
    path: "Confirm",
    component: Confirm
  },
  {
    path: "Signup",
    component: Signup
  },
  {
    path: "/Warehouse",
    component: Warehouse
  },
  {
    path: "/Assisted",
    component: Assisted
  },
  {
    path: "/Profile",
    component: Profile
  },
  {
    path: "/shipped",
    component: Shipped,
    exact: true
  }
];

这样做的好处是，您可以在应用程序中分离并分离关注点，这使得调试更容易推断。这个主要组件只关心渲染路线，这也意味着您的<App />仅具有应用程序必需的导入，而没有一部分路线组件的导入。

现在，您的<App />可以很好，例如：

const App = () => (
  <Provider {...{ store }}>
    <Router>
      <div id="main-wrapper">
        {routes.map(route => (
          <Route key={route.path} {...route} />
        ))}
      </div>
    </Router>
  </Provider>
);

希望这对您有所帮助，让我知道您的生活吧！

我如何在某些选定的组件上隐藏一些导航栏和补充工具栏

2 个答案: