React Router 在地址栏中加载 URL 但不加载组件

Question

Codesandbox 链接在这里。

当用户单击链接时，它应该在“/details”中加载组件。 但是，单击时，它会在地址栏中加载 /details，但实际上并未加载该组件。 它只会在地址栏中手动单独加载到 /details。

路由.js

const Routes = () => {
  return (
    <BrowserRouter>
      <Switch>
        <Route exact path="/" component={App} />
        <Route exact path="/details" component={MachineDetail} />
      </Switch>
    </BrowserRouter>
  );
};

机器卡.js

export default function MachineCard({ image, title, weight, power }) {
  return (
    <>
      <div className="col-lg-4">
        <div className="card">
          <Router>
            <Link to="/details">
              <img className="img-fluid" src={image} alt={title} />
              <h2>{title}</h2>
            </Link>
          </Router>
          <p>Operating weight: {weight}</p>
          <p>Power: {power}</p>
        </div>
      </div>
    </>
  );
}

知道为什么它不会在浏览器中加载“/details”组件吗？

Answer 1

这个问题是您的应用程序中有多个路由器，但您只需要一个。 由于您已经在索引文件中定义了路由器，您可以继续将其从MachineCard.js删除。

因此，您的MachineCard.js组件可以简化为：

export default function MachineCard({ image, title, weight, power }) {
  return (
    <>
      <div className="col-lg-4">
        <div className="card">
          <Link to="/details">
            <img className="img-fluid" src={image} alt={title} />
            <h2>{title}</h2>
          </Link>
          <p>Operating weight: {weight}</p>
          <p>Power: {power}</p>
        </div>
      </div>
    </>
  );
}

Answer 2

我认为您的问题是命名不正确。 在您的路线文件中，您使用的是 MachineDetail，但您正在导出 MachineCard。