Question

代码沙盒链接 here。

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

Routes.js

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

MachineCard.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。

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

2 个答案: