outlet, nested routes에 관해서 질문 있습니다

[김성빈]

<Route path="/products" element={<AllProdcts />}>
     <Route path="new" element={<NewProduct />} />
     <Route path=":id" element={<ProductDetail />} />
 </Route>

AllProdcts => return( <div>
<h4>all producut</h4>
<Outlet />
</div> )
NewProduct => return( <div>new producut</div> )
ProductDetail => return( <div>detail producut</div> )
가 있다고 가정했을 때

/products/new 경로로 접속하면 아래와 같이 동시에 두 개의 div가 보이는 것이 아니라
all producut
new producut

new producut 하나만 보이게 하고 싶습니다.
마찬가지로 /products 경로로 접속 시 all producut만 보이게 하고 싶습니다.
어떤 형식으로 라우터를 수정 해야할까요?

[codingapple]

리액트라우터 6버전 이후부터는 /products/new 접속하면 <NewProduct >하나만 잘 보일걸요

[김성빈]

지금 사용하고 있는 라우터가 6버전입니다!
중첩 라우팅을 사용하면서 
/products 접속 시 <AllProduct> 만
/products/new 접속 시 <NewProduct> 만 
보이게 하고 싶습니다.. 
답변이 이해 가지 않아 재질문 드립니당 ㅠ

[codingapple]

nested route쓰지말거나
현재 url이 /products인 경우 다른거 보여주지말라고 if문 써야할듯요 

[글쓴이]

글