React Router项目中如何仅在NotFound页面隐藏Navbar？

完全可以实现，无需拆分多套布局，只需根据当前路由路径判断是否渲染Navbar即可。以下提供两种适配不同组件类型的解决方案：

方案一：类组件适配（基于react-router-dom v5及以下） #

利用withRouter高阶组件为类组件注入路由信息，通过判断当前路径是否在允许显示Navbar的列表中，控制Navbar的渲染：

import React, { Component } from 'react';
import { BrowserRouter as Router, Switch, Route, withRouter } from 'react-router-dom';
import Home from './components/Home';
import Login from './components/Login';
import About from './components/About';
import Contact from './components/Contact';
import Blog from './components/Blog';
import NotFound from './components/NotFound';
import Navbar from './components/Navbar';

class App extends Component {
  render() {
    // 定义需要显示Navbar的路由路径
    const allowedPaths = ['/', '/login', '/about', '/contact', '/blog'];
    const showNavbar = allowedPaths.includes(this.props.location.pathname);

    return (
      <Router>
        <div>
          {/* 仅在允许的路径下渲染Navbar */}
          {showNavbar && <Navbar />}
          <Switch>
            <Route exact path="/" component={Home} />
            <Route exact path="/login" component={Login} />
            <Route path="/about" component={About} />
            <Route path="/contact" component={Contact} />
            <Route path="/blog" component={Blog} />
            <Route path="*" component={NotFound} />
          </Switch>
        </div>
      </Router>
    );
  }
}

// 用withRouter包裹组件，获取路由location属性
export default withRouter(App);

方案二：函数组件适配（基于react-router-dom v6，推荐） #

使用useLocation钩子获取当前路由信息，逻辑和类组件一致，写法更简洁：

import React from 'react';
import { BrowserRouter as Router, Routes, Route, useLocation } from 'react-router-dom';
import Home from './components/Home';
import Login from './components/Login';
import About from './components/About';
import Contact from './components/Contact';
import Blog from './components/Blog';
import NotFound from './components/NotFound';
import Navbar from './components/Navbar';

function App() {
  const location = useLocation();
  const allowedPaths = ['/', '/login', '/about', '/contact', '/blog'];
  const showNavbar = allowedPaths.includes(location.pathname);

  return (
    <Router>
      <div>
        {showNavbar && <Navbar />}
        <Routes>
          <Route exact path="/" element={<Home />} />
          <Route exact path="/login" element={<Login />} />
          <Route path="/about" element={<About />} />
          <Route path="/contact" element={<Contact />} />
          <Route path="/blog" element={<Blog />} />
          <Route path="*" element={<NotFound />} />
        </Routes>
      </div>
    </Router>
  );
}

export default App;

注意事项 #

1. 确保已导入NotFound和Navbar组件（原代码中未包含，需补充）
2. react-router-dom v6版本中，需使用Routes替代旧版的Switch，且Route组件的component属性替换为element（传入JSX元素）
3. 维护allowedPaths数组时，需与实际路由路径保持一致，避免遗漏或错误匹配

内容的提问来源于stack exchange，提问作者Mohan Raj