當我啟動應用程式時，我的導航欄沒有顯示
這是代碼
<Router>
<Routes>
<Route path='/' element={<Navbar/>,<Products/>
<Route path='/product-view/:id' element={<Navbar/>,<ProductView/>}/>
</Routes>
</Router>
uj5u.com熱心網友回復：
我的猜測是您正在嘗試渲染多個組件。有效的 JSX需要回傳單個節點元素進行渲染。將每個包裹在一個Fragment.
<Router>
<Routes>
<Route
path='/'
element={(
<>
<Navbar />
<Products />
</>
)}
/>
<Route
path='/product-view/:id'
element={(
<>
<Navbar />
<ProductView />
</>
)}
/>
</Routes>
</Router>
如果您希望Navbar在多個路由上一致地呈現 ，那么更優的解決方案是創建一個布局包裝器組件，將嵌套Route組件呈現為Outlet.
const ProductLayout = () => (
<>
<Navbar />
<Outlet />
</>
);
...
<Router>
<Routes>
<Route path="/" element={<Layout />} >
<Route index element={<Products />} />
<Route path='/product-view/:id' element={<ProductView />} />
</Route>
</Routes>
</Router>
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/370049.html