ReactJS多路由配置：如何让两个Route始终匹配渲染？

你的核心问题是错误地尝试用额外的Route组件来渲染MobileNavigation，但Route是用来匹配路径并渲染对应内容的，不是用来全局渲染组件的。要让MobileNavigation和Navigation始终一起渲染，应该在父路由的布局容器里处理条件渲染，而不是新增Route。

方法1：直接在父Route的element中组合导航组件 #

修改根路由的element属性，把Navigation和MobileNavigation放在同一个JSX片段里，根据isMobile条件控制MobileNavigation的显示：

function App() {
  const { isMobile } = useContext(UserContext)

  return (
    <div className="App">
      <Routes>
        {/* 父路由的element同时包含两个导航，根据条件显示MobileNavigation */}
        <Route path='/' element={
          <>
            <Navigation />
            {isMobile && <MobileNavigation />}
          </>
        }>
          <Route index element={<Home />} />
          <Route path='auth' element={<Authentication />} />
          <Route path='shop' element={<Shop />} />
          <Route path='checkout' element={<Checkout />} />
          <Route path='shop/:slug' element={<FullItemPage />} />
          <Route path='favorite' element={<Favorite />} />
        </Route>
      </Routes>
    </div>
  );
}

export default App;

方法2：封装独立的布局组件（更推荐） #

如果导航逻辑复杂，建议抽成单独的布局组件，让代码更清晰：

// 新建Layout组件
import { Outlet } from 'react-router-dom';
import { useContext } from 'react';
import { UserContext } from './path-to-your-context';

function Layout() {
  const { isMobile } = useContext(UserContext);
  
  return (
    <>
      <Navigation />
      {isMobile && <MobileNavigation />}
      <Outlet /> {/* Outlet用来渲染嵌套路由的内容 */}
    </>
  );
}

// App组件中使用Layout
function App() {
  return (
    <div className="App">
      <Routes>
        <Route path='/' element={<Layout />}>
          <Route index element={<Home />} />
          <Route path='auth' element={<Authentication />} />
          <Route path='shop' element={<Shop />} />
          <Route path='checkout' element={<Checkout />} />
          <Route path='shop/:slug' element={<FullItemPage />} />
          <Route path='favorite' element={<Favorite />} />
        </Route>
      </Routes>
    </div>
  );
}

export default App;

为什么你之前的写法失败？ #

• 第一种尝试：<Route index element={isMobile ? <MobileNavigation /> : null} />
  这个Route是根路径的index路由，但父路由已经定义了自己的index路由（<Home />），而且即使渲染，MobileNavigation也只会在根路径显示，不会跟随所有嵌套路由。
• 第二种尝试：{isMobile ? <Route index element={<MobileNavigation />} /> : null}
  条件渲染的Route同样是根index路由，且没有和父路由关联，无法实现“始终和Navigation一起渲染”的需求——它只会在匹配根路径时单独显示，不会和其他嵌套路由的内容共存。

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