Javascript 单击按钮时，路由器不工作

我正在制作一个食品应用程序，当每个组件上的按钮都是 在另一个页面上打开，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;

menu.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;

从“React”导入React；
从“/CardItems.js”导入CardItems；
从“/CardItemsArray”导入CardItemsArray；
功能菜单（）{
const items=CardItemsArray.map（（项）=>(
));
返回(
{items}
);
}
导出默认菜单；

ButtonClick.js

import React from "react";

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

从“React”导入React；
功能按钮点击（道具）{
返回(
按钮被点击
);
}
导出默认按钮单击；

有关工作示例，请参见沙盒：

注:

• 路由器应该环绕index.js中的应用程序
• 路由（不是路由器）是指在交换机内引导路径并将其写入

}/>

• 地图导航路线，而不是硬代码的可读性
• 不要让你的身份证线性化，这会干扰React的跟踪能力
• 在cardItem中，如果您试图获取打开新页面的链接，则应该是

• 然后在应用程序交换机中添加路由

}/>

• 在该项组件中，通过url参数查找数据中的项

---

此行为的原因是您为新页面设置的路由存在于同一组件中

我已经确定了两个选项，您可以采取这两个选项来实现所需的行为：

在App.js文件的应用程序顶层添加一个

路由器

，该应用程序有一个has

路径=“/newpage

和子组件，

。指向此新页面的链接保持不变，即它有

到=“/newpage”

或

修改Menu.js文件中的路由，使其具有两个不同的路由。第一个

路由器将具有
路径=${this.props.match.path}
，在访问时应显示菜单项，第二个路由器将具有
路径=${this.props.match.path}/newpage
。同样，指向新页面的
链接应该有prop
to=${this.props.match.path}/newpage
。这应该显示新页面

另外，这里是React Router提供的

match

道具文档的一部分。我相信通过路由器呈现的每个组件都可以访问它

这是根据第二个选项修改的Menu.js文件。希望对您有所帮助

从“React”导入React；
从“react bootstrap”导入{Card，Button，CardDeck}；
导入“bootstrap/dist/css/bootstrap.min.css”；
导入“/App.css”；
导入按钮从“/ButtonClick”中单击
进口{
BrowserRouter作为路由器，
转换
路线,，
链接
}从“反应路由器dom”；
功能卡片（道具）{
函数名（）{
console.log（`${props.item.name}`）
}
函数showCard（）{
返回(
{props.item.name}
价格：${props.item.Price}
到目前为止的订单：{props.item.Orders}
送货上门时间：{props.item.Delivery}
数量：{props.item.Quantity}
细节
)
}
返回(
{showCard（）}
找不到页面
);
}
导出默认的CardItems；

我想你用错了React路由器

以下是使用React Router的3个入门提示：

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

使用路由组件（而不是路由器）来声明应用程序中的可用路由。对于简单的用例，最好像这样使用它：

使用链接组件（同时指定to=“/routeName”props）转到任何所需的路由。如下所示：

前往某条路线

另外，您可能不需要交换机组件。它应该用于高级情况，即您只需要渲染匹配的第一个子路由，而不渲染其他路由，即使它们也匹配

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

在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;

从“React”导入React；
导入“bootstrap/dist/css/bootstrap.min.css”；
导入“/App.css”；
进口{
BrowserRouter作为路由器，
转换
路线,，
链接
}从“反应路由器dom”；
从“/About”导入关于
从“/Contact”导入联系人
从“/Home”导入主页
从“/”菜单导入菜单
导入按钮从“/ButtonClick”中单击
函数App（）{
返回(
//在这里，将路由器添加到应用程序的顶层。
//参见提示1。
美食节


家


关于


接触


菜单


//在这里，不要使用路由器，而是使用路由。
//参见第2条提示。
//在这里，将这一行添加到下面。参考第2条提示。
//您应该使用Route组件在应用程序中添加任何可用的路由。
//使用此代码，您可以说：
//如果路径等于/按钮单击，请渲染按钮单击组件。
);
}
导出默认应用程序；

在您的CardItems.js中（实际上，我只是猜测这个文件的名称）

从“React”导入React；
进口{卡，
import React from "react";

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



<Route path="/path_name" render={() => <Component />} />

 <Link to={`/item/${item.id}`}>

<Route path="/item/:id" render={() => <Item />} />

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;

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;