React 路由器组件出现然后立即消失

Posted 2023-02-22

【中文标题】React 路由器组件出现然后立即消失

【英文标题】：React router component appears then disappears immediately

【发布时间】：2018-06-04 05:29:55

【问题描述】：

我有一个名为 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>
);

然后当我点击 Trainers 或 Rucksacks 时，h2 元素会在屏幕上闪烁。即出现然后立即消失。为什么会这样？

我想要实现的是拥有一个主页，然后您可以单击呈现我所有类别的类别，然后您可以单击将呈现产品列表的子类别。知道为什么这很时髦并且无法正确显示/渲染吗？

【参考方案1】：

您的应用程序中只能有 1 个路由器。修改类别组件以使用 Switch 而不是 Router：

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>
);

【讨论】：

看起来它想查看完整路径，所以 /categories/trainers: github.com/ReactTraining/react-router/issues/4428