如何使用动态将组件切换到另一个页面<link to="</div"><div id="text_translate"><p> 请帮我解决这个问题，因为我正在自学。 我有一个使用.map 渲染的商店列表，现在我想渲染用户点击的商店。 我已导入 BarberShops 并尝试使用从 React-Router 到 go 的链接到我的 barberShopHandler 的下一页，但没有用。 在我的 shopList 组件上，我有：</p><pre> import React, { Component } from "react"; import "../List.css"; class ShopList extends Component { render() { return ( &lt;div className="list-item"&gt; &lt;div className="listing" onClick={this.props.click}&gt; &lt;div className="listing-main"&gt; &lt;h3 className="listing-title"&gt;{this.props.shop}&lt;/h3&gt; &lt;p className="listing-subtitle"&gt;{this.props.address}&lt;/p&gt; &lt;p className="listing-opening-hours"&gt; {this.props.operation}&lt;/p&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; ); } } export default ShopList;</pre><p> 在我的列表组件上，我有：</p><pre> import React, { Component } from "react"; // import { Link } from "react-router-dom"; import "./List.css"; import Footer from "../../components/Footer"; import Map from "./Map/Map"; import ShopList from "./components/ShopList"; // import BarberShop1 from "../barberShop/BarberShop1"; // import BarberShop2 from "../barberShop/BarberShop2"; class List extends Component { constructor(props) { super(props); this.state = { shops: [ { id: "0", shopName: " my shop name", address: "my shop address", operatingHour: "Open (9:00 - 20:00)", }, { id: "1", shopName: " my shop name", address: " my shop address", operatingHour: "Open (10:00 - 20:00)", }, ], }; } barberShopHandler = (index) =&gt; { const shops = this.state.shops; if (index === shops[0].id) { **&lt;Link to="/barbershop1"&gt; &lt;BarberShop1 /&gt; &lt;/Link&gt;;** ***which didnt work*** console.log(shops[0].id); } else if (index === shops[1].id) { console.log(shops[1].id); } }; render() { const shops = this.state.shops; return ( &lt;div&gt; &lt;Map /&gt; &lt;Footer /&gt; &lt;div className="list-wrapper" style={{ transform: `translateY(1px)` }}&gt; {shops.map((shop, index) =&gt; { return ( &lt;ShopList key={shop.id} shop={shop.shopName} address={shop.address} operation={shop.operatingHour} click={() =&gt; this.barberShopHandler(index)} &gt;&lt;/ShopList&gt; ); })} &lt;/div&gt; &lt;div className="list-refresh"&gt; &lt;button className="refresh-button"&gt;&lt;/button&gt; &lt;/div&gt; &lt;/div&gt; ); } } export default List;</pre><p> **更新**和我的路由器文件</p><pre>import React, { lazy, Suspense } from "react"; import { BrowserRouter as Router, Switch, Route, Redirect, } from "react-router-dom"; const Login = lazy(() =&gt; import("./pages/login/Login")); const List = lazy(() =&gt; import("./pages/list/List")); const BarberShop1 = lazy(() =&gt; import("./pages/barberShop/BarberShop1")); const BarberShop2 = lazy(() =&gt; import("./pages/barberShop/BarberShop2")); export default function Routes() { return ( &lt;Router&gt; &lt;Switch&gt; &lt;Suspense fallback={&lt;div&gt;Loading...&lt;/div&gt;}&gt; &lt;Redirect from="/" to="/login" /&gt; &lt;Route path="/list" component={List} /&gt; &lt;Route path="/barbershop1" component={BarberShop1} /&gt; &lt;Route path="/barbershop2" component={BarberShop2} /&gt; &lt;/Suspense&gt; &lt;/Switch&gt; &lt;/Router&gt; ); }</pre><p> 我想根据用户点击的内容呈现 BarberShop1 或 BarberShop2</p></div>

Question

请帮我解决这个问题，因为我正在自学。 我有一个使用.map 渲染的商店列表，现在我想渲染用户点击的商店。 我已导入 BarberShops 并尝试使用从 React-Router 到 go 的链接到我的 barberShopHandler 的下一页，但没有用。 在我的 shopList 组件上，我有：

import React, { Component } from "react";

import "../List.css";

class ShopList extends Component {
  render() {
    return (
      <div className="list-item">
        <div className="listing" onClick={this.props.click}>
          <div className="listing-main">
            <h3 className="listing-title">{this.props.shop}</h3>
            <p className="listing-subtitle">{this.props.address}</p>
            <p className="listing-opening-hours"> {this.props.operation}</p>
          </div>
        </div>
      </div>
    );
  }
}
export default ShopList;

在我的列表组件上，我有：

import React, { Component } from "react";
// import { Link } from "react-router-dom";

import "./List.css";
import Footer from "../../components/Footer";
import Map from "./Map/Map";
import ShopList from "./components/ShopList";
// import BarberShop1 from "../barberShop/BarberShop1";
// import BarberShop2 from "../barberShop/BarberShop2";

class List extends Component {
  constructor(props) {
    super(props);
    this.state = {
      shops: [
        {
          id: "0",
          shopName: " my shop name",
          address: "my shop address",
          operatingHour: "Open (9:00 - 20:00)",
        },
        {
          id: "1",
          shopName: " my shop name",
          address: " my shop address",
          operatingHour: "Open (10:00 - 20:00)",
        },
      ],
    };
  }

  barberShopHandler = (index) => {
    const shops = this.state.shops;
    if (index === shops[0].id) {
       **<Link to="/barbershop1">
          <BarberShop1 />
        </Link>;** ***which didnt work***
      console.log(shops[0].id);
    } else if (index === shops[1].id) {
      console.log(shops[1].id);
    }
  };

  render() {
    const shops = this.state.shops;
    return (
      <div>
        <Map />
        <Footer />
        <div className="list-wrapper" style={{ transform: `translateY(1px)` }}>
          {shops.map((shop, index) => {
            return (
              <ShopList
                key={shop.id}
                shop={shop.shopName}
                address={shop.address}
                operation={shop.operatingHour}
                click={() => this.barberShopHandler(index)}
              ></ShopList>
            );
          })}
        </div>
        <div className="list-refresh">
          <button className="refresh-button"></button>
        </div>
      </div>
    );
  }
}
export default List;

**更新**和我的路由器文件

import React, { lazy, Suspense } from "react";

import {
  BrowserRouter as Router,
  Switch,
  Route,
  Redirect,
} from "react-router-dom";

const Login = lazy(() => import("./pages/login/Login"));
const List = lazy(() => import("./pages/list/List"));
const BarberShop1 = lazy(() => import("./pages/barberShop/BarberShop1"));
const BarberShop2 = lazy(() => import("./pages/barberShop/BarberShop2"));

export default function Routes() {
  return (
    <Router>
      <Switch>
        <Suspense fallback={<div>Loading...</div>}>
          <Redirect from="/" to="/login" />
          <Route path="/list" component={List} />
          <Route path="/barbershop1" component={BarberShop1} />
          <Route path="/barbershop2" component={BarberShop2} />
        </Suspense>
      </Switch>
    </Router>
  );
}

我想根据用户点击的内容呈现 BarberShop1 或 BarberShop2

Answer 1

Link用于创建链接。 点击发送到某处后无法使用..

您可以使用从路由器传递到List组件的history道具

  barberShopHandler = (index) => {
    const shops = this.state.shops;
    if (index === shops[0].id) {
      this.props.history.push("/barbershop1");
    } else if (index === shops[1].id) {
      this.props.history.push("/barbershop2");
    }
  };

---

但更清洁/更可扩展的方法是将每个商店的 url 添加到其 object 中，然后使用ShopList中的Link

所以在List组件中

this.state = {
  shops: [
    {
      id: "0",
      shopName: " my shop name",
      address: "my shop address",
      operatingHour: "Open (9:00 - 20:00)",
      link: '/barbershop1'
    },
    {
      id: "1",
      shopName: " my shop name",
      address: " my shop address",
      operatingHour: "Open (10:00 - 20:00)",
      link: '/barbershop2'
    },
  ],
};

和

     {shops.map((shop, index) => {
        return (
          <ShopList
            key={shop.id}
            shop={shop.shopName}
            address={shop.address}
            operation={shop.operatingHour}
            link={shop.link}
          ></ShopList>
        );
      })}

并在ShopList

import React, { Component } from "react";
import { Link } from 'react-router-dom';

import "../List.css";

class ShopList extends Component {
  render() {
    return (
      <div className="list-item">
        <Link to={this.props.link} className="listing" onClick={this.props.click}>
          <div className="listing-main">
            <h3 className="listing-title">{this.props.shop}</h3>
            <p className="listing-subtitle">{this.props.address}</p>
            <p className="listing-opening-hours"> {this.props.operation}</p>
          </div>
        </Link>
      </div>
    );
  }
}
export default ShopList;

Answer 2

在您的情况下，您必须将Link包装在 Barbershop 组件周围： onClick逻辑包含在链接本身中。

{shops.map((shop, index) => {
    return (
      <Link to={`/barbershop${index}`} key={shop.id}>
        <ShopList
          shop={shop.shopName}
          address={shop.address}
          operation={shop.operatingHour}
          click={() => this.barberShopHandler(index)}
        ></ShopList>
      </Link>
    );
  })}