Yêu cầu Mar 2nd, 2022 3:46 a.m. 198 0 1
  • 198 0 1
+2

React router dom v6: Cannot load layout

Chia sẻ
  • 198 0 1

Mình có dùng react router dom và sử dụng layout như trong ví dụ:

https://stackblitz.com/github/remix-run/react-router/tree/main/examples/custom-filter-link?file=src/App.tsx

Tuy nhiên, mình có add 1 component map vào layout. Nếu <outlet /> không nhận component nào thì mình có thể load được trang, ngược lại, thì mình load được outlet component nhưng mình không load được map.

Mong được bạn nào đó có thể giải đáp, hoặc là cho mình xin docs về logic render của react router dom v6

1 CÂU TRẢ LỜI


Đã trả lời Mar 2nd, 2022 4:11 a.m.
+1

Outlet được sử dụng nhằm mục đích cho bạn render 1 trang con bên trong trang cha ý

<Routes>
        <Route path="/" element={<Layout />}>
          <Route index element={<SneakerGrid />} />
          <Route path="/sneakers/:id" element={<SneakerView />} />
          <Route path="*" element={<NoMatch />} />
        </Route>
      </Routes>

Như cách định nghĩa trên thì khi bạn truy cập url / thì sẽ render component Layout, truy cập /sneaker/:id thì sẽ render SneakerView ở vị trí mà bạn đặt component Outlet ở trong Layout. Nếu <outlet /> không nhận component nào thì mà bạn có thể load được trang, là bởi vì trang hiện tại đang render component Layout

Chia sẻ
Avatar Hải Hà @HaiHaChan
Mar 2nd, 2022 4:34 a.m.

@dao.thai.son vấn đề là mình load được SneakerGrid component nhưng k load được layout, khi trong layout có 1 cái map

Mar 4th, 2022 9:28 a.m.

@HaiHaChan huhu goy bạn fix được chưa fix cho mình với

Viblo
Hãy đăng ký một tài khoản Viblo để nhận được nhiều bài viết thú vị hơn.
Đăng kí