React路由渲染问题：无法显示Menu及/food路径，Navbar显示异常

React渲染元素的常用方法 #

• 组件内通过return返回JSX元素（函数组件/类组件的render方法），这是最常用的方式。
• 使用React.createElement手动创建元素，适合动态生成元素的场景，语法示例：React.createElement('div', { className: 'container' }, 'Hello')。
• React 18+ 中通过createRoot将根组件挂载到DOM节点，示例：

import { createRoot } from 'react-dom/client';
createRoot(document.getElementById('root')).render(<App />);

你的路由问题解决方案 #

你当前的路由配置存在嵌套路由匹配逻辑错误，导致/food路径无法渲染Menu组件，同时无法正确控制Navbar的显示范围。推荐使用react-router-dom v6的布局路由+Outlet方案，这是官方推荐的共享布局实现方式：

步骤1：创建带Navbar的布局组件 #

import { Outlet } from 'react-router-dom';

function MainLayout() {
  return (
    <div>
      <Navbar />
      <Outlet /> {/* 子路由内容会渲染在这里 */}
    </div>
  );
}

步骤2：修改路由配置 #

return (
  <div>
    <Routes>
      {/* 所有需要显示Navbar的页面，作为MainLayout的子路由 */}
      <Route element={<MainLayout />}>
        <Route path="/" element={<DeliveryPage />} />
        <Route path="/food" element={<Menu />} />
      </Route>
      {/* 不需要Navbar的页面单独配置 */}
      <Route path="/signup" element={<SignUp />} />
    </Routes>
    <Footer />
  </div>
);

原代码问题说明 #

你之前的嵌套路由中，外层Route的path="/"是精确匹配，当访问/food时，外层路由不会匹配，导致内部的子路由完全无法渲染。而布局路由的方式会让所有子路由自动继承布局中的Navbar，同时非布局下的路由（如/signup）则不会显示Navbar，完美符合你的需求。

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