Question

点击Food Truck按钮后，我试图导航到另一个组件。在nextPage()函数中，我试图做到这一点，但它总是使我出错。

单击按钮时如何从页面跳到下一页？

注意：我想转到一个完全不同的页面，而不是停留在同一页面上。

import React, { Component } from "react";
import fire from "../../config/Fire";
import classes from "./Home.css";
import Aux from "../../hoc/Aux";
import Taco from "../../components/taco/Taco";

class Home extends Component {
  constructor(props) {
    super(props);
    this.state = {
      taco: {}
    };
  }

  nextPage() {
    return this.state.taco ? <Taco /> : <Home />;
  }

  render() {
    return (
      <Aux>
        <h1 className={classes.ChooseTruck}>Choose your favorite truck!</h1>
        <button
          type="button"
          className="btn btn-outline-primary btn-lg btn-block"
          onClick={this.nextPage}
        >
          Food Truck
        </button>
      </Aux>
    );
  }
}

export default Home;

Answer 1

大家好，我弄清楚我做错了什么：D这是您在有条件的情况下需要参考的方式：D。

-我必须将taco绑定到构造函数中，即this.taco = this.taco.bind(this);

-创建一个名为flag的状态，并将其设置为等于false，即this.state {flag: false}

-在nextPage()方法内部，我必须将状态设置为true以便以后使用，即this.setState({flag: true});

-在render()内，我设置了一个名为flag的变量，它等于标志的状态，即const flag = this.state.flag;，最初是假的，但随后在单击调用{{ 1}}

-最后，我们检查nextPage()是否设置为flag。如果是真的，则返回我尝试导航到哪个true

的组件

<Taco/>

Answer 2

仅使用纯React库是不可能导航到其他屏幕的。如果仅使用React而没有任何导航库，则意味着您只能拥有SPA（单页应用程序）。

尝试研究此github链接https://github.com/ReactTraining/react-router。或只是在https://reacttraining.com/react-router/处导航到官方文档。

为什么无法导航到下一页？

2 个答案: