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>

然后我点击类别，然后呈现Categories组件，就是这样：

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元素在屏幕上闪烁。即出现然后立即消失。为什么会这样？

我想要实现的是拥有一个主页，然后您可以点击呈现我所有类别的类别，然后您可以点击将显示产品列表的子类别。任何想法为什么这是时髦的，没有正确显示/渲染？

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

然后出现React router组件然后立即消失

1 个答案: