javascript - react 路由器在按钮单击时不起作用

Question

我正在制作一个食物应用程序，当每个组件上的按钮是它时
在另一个页面上打开并且 URL 也发生了变化。所以我正在使用 react 路由器但是当我单击按钮时它不会打开该组件
这是 App.js

import React from "react";
import "bootstrap/dist/css/bootstrap.min.css";
import "./App.css";
import {
  BrowserRouter as Router,
  Switch,
  Route,
  Link
} from "react-router-dom";
import About from "./About"
import Contact from "./Contact"
import Home from "./Home"
import Menu from "./Menu"
function App() {

  return (
    <div>
      <div>
        <div className="navbar">
          <h3>Food Festive</h3>
          <div>
            <ul>
              <li>
                <Link className="chg" to="/home">Home</Link>
              </li>
              <li>
                <Link className="chg" to="/about">About</Link>
              </li>
              <li>
                <Link className="chg" to="/contact">Contact</Link>
              </li>
              <li>
                <Link className="chg" to="/menu">Menu</Link>
              </li>
            </ul>
          </div>
        </div>

        <Switch>

          <Router path="/home">
            <Home />
          </Router>
          <Router path="/about">
            <About />
          </Router>
          <Router path="/contact">
            <Contact />
          </Router>
          <Router path="/menu">
            <Menu />
          </Router>
        </Switch>
      </div>
    </div>
  );
}

export default App;

这里的 CardItems.js 我希望当我单击 Button 时它会单独打开 ButtonClick.js。但是当我单击它时，它会显示在这样的按钮之后:

import React from "react";
import { Card, Button, CardDeck } from "react-bootstrap";
import "bootstrap/dist/css/bootstrap.min.css";
import "./App.css";
import ButtonClick from "./ButtonClick"
import {
  BrowserRouter as Router,
  Switch,
  Route,
  Link
} from "react-router-dom";

function CardItems(props) {
  function name() {
    console.log(`${props.item.name}`)
  }
  return (
    <div className="wrap">
      <Card>
        <Card.Img variant="top" src={require(`${props.item.img}`)} />
        <Card.Body>
          <h5>{props.item.name}</h5>
          <div>
            <h6>Price : ${props.item.price} </h6>
            <h6>Orders till now : {props.item.Orders} </h6>
            <h6>Home Delivery Time : {props.item.Delivery} </h6>
            <h6>Quantity : {props.item.Quantity}</h6>
          </div>
          <Link to="/newpage">
            <Button variant="info" onClick={name}>
              Details
          </Button>
          </Link>

          <Switch>
            <Router path="/newpage">
              <ButtonClick />
            </Router>
          </Switch>

        </Card.Body>
      </Card >
    </div>
  );
}

export default CardItems;

CardItems 数组

const CardItemsArray = [
  {
    id: 1,
    img: "./images/Food/cupcakes.jpg",
    name: "Cupcakes",
    price: 20,
    Orders: 3025,
    Delivery: "45mins",
    Quantity: "6 Cup-cakes",
  },

  {
    id: 2,
    img: "./images/Food/fried-chicken.jpg",
    name: "Fried Chicken",
    price: 30,
    Orders: 3001,
    Delivery: "45mins",
    Quantity: "3 Pieces",
  },

  {
    id: 3,
    img: "./images/Food/pizza23.jpg",
    name: "Pizza",
    price: 50,
    Orders: 5029,
    Delivery: "45mins",
    Quantity: "1 Pizza",
  },

  {
    id: 4,
    img: "./images/Food/instant-nood.jpg",
    name: "Instant Noodles",
    price: 10,
    Orders: 1042,
    Delivery: "45mins",
    Quantity: "1 Plate",
  },

  {
    id: 5,
    img: "./images/Food/hamburger.jpg",
    name: "Hamburger",
    price: 40,
    Orders: 2134,
    Delivery: "45mins",
    Quantity: "1 Burgur",
  },
  {
    id: 6,
    img: "./images/Food/sushi.jpg",
    name: "Shushi",
    price: 100,
    Orders: 1872,
    Delivery: "45mins",
    Quantity: "1 Plate",
  },

  {
    id: 7,
    img: "./images/Food/ice.jpg",
    name: "Ice-Cream",
    price: 10,
    Orders: 1272,
    Delivery: "45mins",
    Quantity: "1 Cup",
  },

  {
    id: 8,
    img: "./images/Food/chicken-stack.jpg",
    name: "Beef Steack",
    price: 70,
    Orders: 2381,
    Delivery: "45mins",
    Quantity: "1 Piece",
  },

  {
    id: 9,
    img: "./images/Food/fries.jpg",
    name: "Fries",
    price: 15,
    Orders: 4231,
    Delivery: "45mins",
    Quantity: "1 Pack",
  },

  {
    id: 10,
    img: "./images/Food/ice-cups.jpg",
    name: "Ice-Cream-Cups",
    price: 20,
    Orders: 2836,
    Delivery: "45mins",
    Quantity: "2 Cups",
  },
  {
    id: 11,
    img: "./images/Food/strawb-smo.jpg",
    name: "Strawberry Smoothie",
    price: 30,
    Orders: 2981,
    Delivery: "45mins",
    Quantity: "1 Glass",
  },

  {
    id: 12,
    img: "./images/Food/salad2.jpg",
    name: "Salad",
    price: 20,
    Orders: 2311,
    Delivery: "45mins",
    Quantity: "1 Plate",
  },

  {
    id: 13,
    img: "./images/Food/orange juice.jpg",
    name: "Orange Juice",
    price: 15,
    Orders: 1637,
    Delivery: "45mins",
    Quantity: "1 Glass",
  },

  {
    id: 14,
    img: "./images/Food/fruits-beauti.jpg",
    name: "Fruit Salad",
    price: 30,
    Orders: 1091,
    Delivery: "45mins",
    Quantity: "1 Plate",
  },

  {
    id: 15,
    img: "./images/Food/tea1.jpg",
    name: "Ice Tea",
    price: 20,
    Orders: 2348,
    Delivery: "45mins",
    Quantity: "1 Cup",
  },
  {
    id: 16,
    img: "./images/Food/tea2.jpg",
    name: "Mint Tea",
    price: 20,
    Orders: 2536,
    Delivery: "45mins",
    Quantity: "1 Cup",
  },
  {
    id: 17,
    img: "./images/Food/bread.jpg",
    name: "Bread Cuisine",
    price: 40,
    Orders: 975,
    Delivery: "45 mins",
    Quantity: "1 Plate",
  },
  {
    id: 18,
    img: "./images/Food/lime-juice.jpg",
    name: "Lime Juice",
    price: 20,
    Orders: 6437,
    Delivery: "45 mins",
    Quantity: "1 Glass",
  },
  {
    id: 19,
    img: "./images/Food/pizza2.jpg",
    name: "Fagita Pizza",
    price: 100,
    Orders: 1862,
    Delivery: "45 mins",
    Quantity: "1 Pizza",
  },
  {
    id: 20,
    img: "./images/Food/cake2.jpg",
    name: "Cake",
    price: 150,
    Orders: 2154,
    Delivery: "45 mins",
    Quantity: "1 Cake",
  },
];

export default CardItemsArray;

菜单.js

import React from "react";
import CardItems from "./CardItems.js";
import CardItemsArray from "./CardItemsArray";

function Menu() {
    const items = CardItemsArray.map((item) => (
        <CardItems key={item.id} item={item} />
    ));
    return (
        <div>
            <div>{items}</div>
        </div>
    );
}

export default Menu;

按钮点击.js

import React from "react";

function ButtonClick(props) {
  return (
    <div>
      <h1>Button is Clicked</h1>
    </div>
  );
}
export default ButtonClick;

Answer 1

我认为您一直在以错误的方式使用 React Router。
以下是开始使用 React Router 的 3 个技巧:

仅在您的应用程序中使用 1(一)个路由器组件，该组件应位于顶层。 (它是 BrowserRouter，但您在导入时将其重命名为 Router)

使用路由组件(不是路由器)在您的应用程序中声明可用路由。对于简单的用例，最好像这样使用它:<Route path="/thePath" component={ComponentName} />

使用链接组件(同时指定 to="/routeName" Prop )去任何想要的路线。像这样:<Link to="/thePath"><button>Go to a certain route</button></Link>

奖金。您可能不需要 Switch 组件。它应该在高级情况下使用，您只需要渲染匹配的第一个子路由并且即使它们也匹配也不渲染其他路由。

您想在单独的屏幕中转到 ButtonClick.js 对吗？您需要将其添加到您的 route 。
所以在你的情况下，它应该是这样的:
在 app.js 中

import React from "react";
import "bootstrap/dist/css/bootstrap.min.css";
import "./App.css";
import {
  BrowserRouter as Router,
  Switch,
  Route,
  Link
} from "react-router-dom";
import About from "./About"
import Contact from "./Contact"
import Home from "./Home"
import Menu from "./Menu"
import ButtonClick from "./ButtonClick"

function App() {

  return (
   // HERE, add Router to the top level of your app.
   // Refer to tip number 1.
    <Router>
      <div>
        <div className="navbar">
          <h3>Food Festive</h3>
          <div>
            <ul>
              <li>
                <Link className="chg" to="/home">Home</Link>
              </li>
              <li>
                <Link className="chg" to="/about">About</Link>
              </li>
              <li>
                <Link className="chg" to="/contact">Contact</Link>
              </li>
              <li>
                <Link className="chg" to="/menu">Menu</Link>
              </li>
            </ul>
          </div>
        </div>

        // HERE, don't use Router, but use Route.
        // Refer to tip number 2.
        <Route path="/home" component={Home} />
        <Route path="/about" component={About} />
        <Route path="/contact" component={Contact} />
        <Route path="/menu" component={Menu} />

        // HERE, add this line below. Refer to tip number 2. 
        // You should add any routes available in your app using the Route component.
        // With this code you are saying:
        // If the path is equal to /button-click, please render the ButtonClick component.
        <Route path="/button-click" component={ButtonClick} />
        
      </div>
    </Router>
  );
}

export default App;

在你的 CardItems.js 中(其实我只是猜这个文件的名字)

import React from "react";
import { Card, Button, CardDeck } from "react-bootstrap";
import "bootstrap/dist/css/bootstrap.min.css";
import "./App.css";
import ButtonClick from "./ButtonClick"
import {
  BrowserRouter as Router,
  Switch,
  Route,
  Link
} from "react-router-dom";

function CardItems(props) {
  function name() {
    console.log(`${props.item.name}`)
  }
  return (
    <div className="wrap">
      <Card>
        <Card.Img variant="top" src={require(`${props.item.img}`)} />
        <Card.Body>
          <h5>{props.item.name}</h5>
          <div>
            <h6>Price : ${props.item.price} </h6>
            <h6>Orders till now : {props.item.Orders} </h6>
            <h6>Home Delivery Time : {props.item.Delivery} </h6>
            <h6>Quantity : {props.item.Quantity}</h6>
          </div>

          // HERE, make sure your button is wrapped with Link component, supply it with its corresponding "to" props. 
          // Refer to tip number 3.
          // With this code, you are saying:
          // If anyone clicks this button, redirects them into /button-click route.
          // And because we have set this route in app.js, the user will see the ButtonClick component.
          <Link to="/button-click">
            <Button variant="info" onClick={name}>
              Details
            </Button>
          </Link>

          // And over here, you don't need any Switch.

        </Card.Body>
      </Card >
    </div>
  );
}

export default CardItems;

而已!希望能帮助到你。如果您仍然遇到错误，请告诉我。
PS:我没有运行这段代码，我只是在 StackOverflow 中编辑它，它可能包含一些语法错误。但是我尽力不让任何错误出现在你的方式中:) 我知道评论会出错，因为 JSX 中的评论有点复杂，就像这样 {/* commented code */}。我只是懒得这样做，所以我只使用简单的双斜杠。在你理解它之后，你可以在你的代码中删除它。