React如何实现除首页外所有页面共用同一Navbar布局

给你两种可直接用的实现方式，按需选择即可：

方案1：拆分路由嵌套结构（推荐） #

你当前的代码把所有路由都包裹在<Layout>标签内，导致所有页面强制加载通用Navbar，只要调整路由的嵌套结构，把不需要通用Layout的页面单独抽出来即可：
修改后的App组件代码：

App = () => ( 
<Provider store={store}>
    <Router>
      <Switch>
        {/* 首页单独配置，不使用通用Layout */}
        <Route exact path='/' component={Home} />
        {/* 其余页面统一使用通用Layout */}
        <Layout>
          <Route exact path='/about' component={About} />
          <Route exact path='/contact' component={Contact} />
          <Route exact path='/listings' component={Listings} />
          <PrivateRoute exact path='/listings/:id' component={ListingDetail} />
          <Route exact path='/login' component={Login} />
          <Route exact path='/signup' component={SignUp} />
          <Route component={NotFound} />
        </Layout>
      </Switch>  
    </Router>
</Provider>
);

该方案逻辑清晰，后续要新增其他不需要通用Layout的页面时，直接在<Switch>下新增对应路由即可，无需额外判断逻辑。

方案2：Layout内做路径条件判断 #

如果不想调整现有路由结构，可以通过react-router提供的useLocation hook拿到当前页面路径做判断，你之前尝试失败大概率是没有正确拿到路由上下文的路径参数。
修改后的Layout组件代码：

import React from 'react';
import { useLocation } from 'react-router-dom';
import Navbar from '../components/Navbar';

const Layout = (props) => {
  const { pathname } = useLocation();
  // 首页路径不渲染通用导航栏，其余路径都渲染
  const shouldRenderNavbar = pathname !== '/';
  
  return (
    <div>
      {shouldRenderNavbar && <Navbar/>}
      {props.children}
    </div>
  );
};

export default Layout;

如果后续有其他页面也不需要通用导航栏，直接修改判断条件即可，比如：

const hideNavbarPaths = ['/', '/login'];
const shouldRenderNavbar = !hideNavbarPaths.includes(pathname);

补充说明 #

首页需要的独立导航栏直接写在Home组件内部即可，不会和通用导航栏产生冲突。从你贴的代码判断你使用的是react-router v5版本，以上代码均可直接运行；如果是v6版本只需调整路由对应API即可。

内容的提问来源于stack exchange，提问作者Matheus Reimer