Asked Mar 2nd, 3:46 a.m. 89 0 1
  • 89 0 1
+2

React router dom v6: Cannot load layout

Share
  • 89 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 ANSWERS


Answered Mar 2nd, 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

Share
Avatar Hải Hà @HaiHaChan
Mar 2nd, 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

0
| Reply
Share
Mar 4th, 9:28 a.m.

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

0
| Reply
Share
Viblo
Let's register a Viblo Account to get more interesting posts.