Javascript 如何使用<；将组件动态切换到另一个页面；链接到=

请帮我解决这个问题，因为我正在自学。 我有一个使用.map渲染的商店列表，现在我想渲染用户单击的商店。 我导入了我的理发店，并尝试使用React路由器的链接转到我的理发店处理程序的下一页，但没有成功。 在我的购物清单组件中，我有：

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，{Component}来自“React”；
导入“./List.css”；
类ShopList扩展组件{
render（）{
返回(
{这个。道具。商店}
{this.props.address}
{this.props.operation}
);
}
}
导出默认购物清单；

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

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，{Component}来自“React”；
//从“react router dom”导入{Link}；
导入“/List.css”；
从“../../components/Footer”导入页脚；
从“/Map/Map”导入地图；
从“/components/ShopList”导入购物清单；
//从“./barberShop/BarberShop1”导入BarberShop1；
//从“./barberShop/BarberShop2”导入BarberShop2；
类列表扩展组件{
建造师（道具）{
超级（道具）；
此.state={
商店：[
{
id:“0”，
店名：“我的店名”，
地址：“我的店铺地址”，
营业时间：“营业（9:00-20:00）”，
},
{
id:“1”，
店名：“我的店名”，
地址：“我的店铺地址”，
营业时间：“营业（10:00-20:00）”，
},
],
};
}
barberShopHandler=（索引）=>{
const shops=this.state.shops；
如果（索引===商店[0].id）{
**
哪一个不起作用***
console.log（商店[0].id）；
}else if（索引===shops[1].id）{
console.log（shops[1].id）；
}
};
render（）{
const shops=this.state.shops；
返回(
{shops.map（（shop，index）=>{
返回(
this.barberShopHandler（索引）}
>
);
})}
);
}
}
导出默认列表；

**更新** 还有我的路由器文件

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

import React，{lazy，suspent}来自“React”；
进口{
BrowserRouter作为路由器，
转换
路线,，
重新使用
}从“反应路由器dom”；
const Login=lazy（（）=>import（“./pages/Login/Login”）；
const List=lazy（（）=>import（“./pages/List/List”）；
const BarberShop1=懒惰（（）=>导入（“./pages/BarberShop1”）；
const BarberShop2=懒惰（（）=>导入（“./pages/BarberShop2”）；
导出默认函数路由（）{
返回(
);
}

---

我想根据用户单击的对象呈现BarberShop1或BarberShop2。在您的情况下，您必须将

链接环绕在Barbershop组件周围：
onClick
逻辑包含在链接本身中

{shops.map（（shop，index）=>{
返回(
this.barberShopHandler（索引）}
>
);
})}
链接

用于创建链接。单击“发送到某处”后无法使用

您可以使用从路由器传递到

列表

组件的

历史

道具

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

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'
    },
  ],
};

---

但是一种更干净/更可扩展的方法是将每个商店的url添加到其对象中，然后使用

商店列表中的
链接

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;

所以在
列表中
组件

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

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'
    },
  ],
};

及

react router（）文档对此进行了很好的解释。如果你被卡住了，你应该试着跟随它，问一个更具体的问题。@PhilipFeldmann谢谢。是的，我使用，但您没有按照文档中的说明设置路线吗？到底是什么不起作用？您提供的代码不包括任何react路由器代码，根本不可能猜出哪里出了问题。@PhilipFeldmann抱歉，我不想把我所有的代码都放在这里。但是是的，我现在会更新我的代码。我的坏，钥匙也必须移动到链接组件。我已经更新了答案。有关为什么需要密钥的更多信息：