リアクタのルータコンポーネントが表示され、すぐに消えて表示されます。

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> 

私は、カテゴリをクリックすると、それはまさにこのですカテゴリーコンポーネント、レンダリング：私は、トレーナーやリュックサックをクリックすると

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

アプリケーションには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> 
);