无法从某些特定路由中隐藏某些组件答案

【问题标题】：Unable to hide some components from some specific routes无法从某些特定路由中隐藏某些组件
【发布时间】：2021-11-26 22:07:43
【问题描述】：

所以我有这个应用程序，它在所有路线中都有相同的布局，除了两个，登录和注册。我一直在尝试为登录和注册路由设置完全独立的布局，但我无法做到。

App 组件包含所有路由，我正在使用条件检查我想在window.location.pathnam 的帮助下隐藏的组件的值。如果用户在“/”（即登录路径）或“/register”中，则返回空字符串。如果它们在其他一些路由中，则返回这些组件。

但是现在登录/注册路由没有显示组件，但是如果我转到应该有页眉、侧边栏、页脚组件的内部路由，我看不到它们。他们从他们应该去的路线上消失了。

我在这里做错了什么？

这是应用程序组合：

import React from 'react';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
import Header from './components/Header/Header';
import Sidebar from './components/Sidebar/Sidebar';
import Footer from './components/Footer/Footer';
import style from './App.module.css';
import RegisterScreen from './screens/RegisterScreen/RegisterScreen';
import LoginScreen from './screens/LoginScreen/LoginScreen';
import Screen3 from './screens/Screen3/Screen3';
import Screen4 from './screens/Screen4/Screen4';
import Screen5 from './screens/Screen5/Screen5';
import Screen6 from './screens/Screen6/Screen6';

const App = () => {

    let header = window.location.pathname === '/' || '/register' ? '' : <Header />;
    let sidebar = window.location.pathname === '/' || '/register' ? '' : <Sidebar />;
    let footer = window.location.pathname === '/' || '/register' ? '' : <Footer />;

    return (
        <Router>
            {/* <Header /> */}
            {header}

            <div className={style.appBody}>

                {/* <Sidebar /> */}
                {sidebar}

                <main className={style.main}>
                    <Switch>
                        <Route path='/' component={LoginScreen} exact />
                        <Route path='/register' component={RegisterScreen} exact />
                        <Route path='/screen3' component={Screen3} exact />
                        <Route path='/screen4' component={Screen4} exact />
                        <Route path='/screen5' component={Screen5} exact />
                        <Route path='/screen6' component={Screen6} exact />
                    </Switch>
                </main>

            </div>

            {/* <Footer /> */}
            {footer}
        </Router>
    )
}

export default App;

【问题讨论】：

标签： javascript reactjs react-hooks react-router

【解决方案1】：

使用来自react-router-dom 的useLocation 获取当前路径名。
使用 .split() 函数，您可以获得最后一项。
在根据位置（页眉、页脚、...）而变化的组件中，创建您的条件（使用三元运算符或 switch case 条件）。

例子：

Header.js（带三元运算符）

import React from 'react';
import { useLocation } from 'react-router-dom';

export default function Header() {
  const path = useLocation().pathname;
  const location = path.split('/')[1];

  return (
    <div>
      {location === 'login' ? (
        <div>
          
        </div>
      ) : (
        <div>
          
        </div>
      )}
    </div>
  );
}

Footer.js（带有 switch case 条件）

import React from 'react';
import { useLocation } from 'react-router-dom';

import ComponentA from './components/ComponentA';
import ComponentB from './components/ComponentB';
import ComponentC from './components/ComponentC';

export default function Footer() {
  const path = useLocation().pathname;
  const location = path.split('/')[1];

  const checkLocation = (uri) => {
    switch (uri) {
      case 'login':
        return <ComponentA />;
      case 'register':
        return <ComponentB/>;
      case 'about':
        return <ComponentC />;
      default:
        return null;
    }
  };

  return (
    <div>
      {checkLocation(location)}
    </div>
  );
}

演示： Stackblitz

【讨论】：

【解决方案2】：

创建两个不同的布局，我的建议是创建 src/layouts 文件夹并在此处保存您的布局。在你的 app.js 或 index.js 上使用 react router 两个在不同布局之间切换

附言。基本上你的侧边栏、页脚、导航栏应该在你的自定义布局中，而不是在 app.js 或 index.js 上

【讨论】：