React项目使用react-router-dom时特定路由无法正确隐藏公共组件问题

问题原因 #

你的条件判断语法存在逻辑错误：
window.location.pathname === '/' || '/register' 这个表达式永远返回真值。
按照JS运算符优先级，全等===的优先级高于逻辑或||，所以代码实际执行逻辑是：先判断window.location.pathname === '/'，如果结果为假，就直接返回'/register'，而非空字符串在布尔判断中属于真值，因此不管当前路径是什么，整个条件的结果都为真，三元运算永远返回空字符串，导致Header、Sidebar、Footer在所有路由下都不会渲染。

修复方案 #

快速修复 #

先把条件判断补全，两个路径都要和当前路径做全等判断：

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

更稳定的优化 #

不推荐直接使用window.location.pathname做判断，路由变化时可能不会触发App组件重渲染，导致布局没有同步更新。可以用react-router提供的useLocation钩子，注意该钩子必须在Router包裹的组件内部调用，你可以把判断逻辑抽成公共布局组件，或者把Router提到App组件的外层。

最佳实践：嵌套路由拆分布局 #

更优雅的实现方式是用嵌套路由拆分登录注册页和内部页的布局，不需要写任何条件判断：

1. 新建公共布局组件Layout.js：

import Header from './components/Header/Header';
import Sidebar from './components/Sidebar/Sidebar';
import Footer from './components/Footer/Footer';
import style from './App.module.css';

const Layout = ({ children }) => {
  return (
    <>
      <Header />
      <div className={style.appBody}>
        <Sidebar />
        <main className={style.main}>{children}</main>
      </div>
      <Footer />
    </>
  )
}
export default Layout;

2. 修改App组件的路由配置：

import React from 'react';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
import Layout from './Layout';
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 = () => {
  return (
    <Router>
      <Switch>
        <Route path='/' component={LoginScreen} exact />
        <Route path='/register' component={RegisterScreen} exact />
        <Route path='/' render={() => 
          <Layout>
            <Switch>
              <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>
          </Layout>
        } />
      </Switch>
    </Router>
  )
}

export default App;

后续新增内部路由只要添加到Layout包裹的Switch内部即可，维护更方便。

内容的提问来源于stack exchange，提问作者s.khan