React Router Dom配置后启动应用Navbar不显示问题咨询

问题原因 #

你的路由配置存在两处语法错误，直接导致Navbar无法正常渲染：

• React Router v6 的element属性仅支持传入单个React节点，你用逗号分隔<Navbar/>和页面组件的写法不符合语法规范
• 首页path='/'对应的Route标签未正确闭合，也没有补全element属性值的花括号包裹

修复方案 #

快速修复

将同路由下要渲染的多个组件用React Fragment（<></>）包裹，修正标签闭合问题即可：

<Router>
  <Routes> 
    <Route path='/' element={<>
      <Navbar/>
      <Products/>
    </>} />
    <Route path='/product-view/:id' element={<>
      <Navbar/>
      <ProductView/>
    </>} />
  </Routes>
</Router>

优化方案（推荐）

抽离公共布局组件，用嵌套路由实现Navbar全局复用，避免每个路由重复编写导航栏代码：

1. 封装公共布局组件

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

const Layout = () => {
  return (
    <>
      <Navbar />
      {/* 子路由页面的渲染出口 */}
      <Outlet />
    </>
  )
}

2. 调整路由配置

<Router>
  <Routes>
    <Route element={<Layout />}>
      <Route path='/' element={<Products/>} />
      <Route path='/product-view/:id' element={<ProductView/>} />
    </Route>
  </Routes>
</Router>

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