반응 라우터 구성 요소가 나타난 다음 즉시 사라집니다.

Question

main이라는 구성 요소가 있습니다. 이는 내측이 있습니다

<Router> 
     <div> 
     <ul> 
      <li><Link to="/categories">Category</Link></li> 
      <li><Link to="/basket">Basket</Link></li> 
     </ul> 

     <Route 
      path="/basket" 
      render={() => (
      <Basket 
      /> 
     )} 
     /> 

     <Route 
      path="/categories" 
      render={() => (
      <Categories /> 
     )} 
     /> 
     </div> 
    </Router> 

I은 ​​다음 카테고리를 클릭 즉, 이는 범주 성분을 렌더링 그냥 :

const Categories =() => (
    <Router> 
    <div> 
     <ul> 
     <li><Link to="/trainers">Trainers</Link></li> 
     <li><Link to="/rucksacks">rucksacks</Link></li> 
     </ul> 

     <Route path="/trainers" component={Trainers} /> 
     <Route path="/rucksacks" component={Rucksacks} /> 
    </div> 
    </Router> 
); 

const Trainers =() => (
    <div> 
    <h2>Trainers</h2> 
    </div> 
); 

const Rucksacks =() => (
    <div> 
    <h2>Rucksacks</h2> 
    </div> 
); 

그때 트레이너 나 배낭은 H2 소자 깜박 누르면 화면에. 즉 즉시 나타난다. 왜 이럴 수 있니?

달성하고자하는 것은 홈 페이지를 가지고 있으며 모든 카테고리를 렌더링하는 카테고리를 클릭 한 다음 제품 목록을 렌더링 할 하위 카테고리를 클릭 할 수 있습니다. 이것이 왜 펑키하고 올바르게 표시/렌더링되지 않는지 어떤 생각입니까?

Answer 1

응용 프로그램에는 라우터가 하나만있을 수 있습니다.

const Categories =() => (
    <div> 
     <ul> 
     <li><Link to="/categories/trainers">Trainers</Link></li> 
     <li><Link to="/categories/rucksacks">rucksacks</Link></li> 
     </ul> 

     <Switch> 
     <Route path="/categories/trainers" component={Trainers} /> 
     <Route path="/categories/rucksacks" component={Rucksacks} /> 
     </Switch> 
    </div> 
);