Question

我正在将简单的员工列表和详细演示放到ReactJS中。我有员工列表组件，该组件显示了从某个虚拟休息Web服务获取的所有员工列表，并显示在页面上。

class contactList extends Component {
  constructor(props) {
    super(props);
    this.state = {
      employees: [],
    };
  }

  componentDidMount() {
    this.EmployeeList();
  }
  EmployeeList() {
    fetch('https://jsonplaceholder.typicode.com/comments')
      .then(response => response.json())
      .then(results => {
        this.setState({ employees: results })
        .catch(
          error => { console.log(error); }
        );
      });

  }
  onDelete(e) {

  }

  render() {
    console.log(this.state.employees);
    const persons = this.state.employees.map((item, i) => (
      <div>
        <table>
          <tbody>
            <tr>
              <td>
                <Link to={"/Contactdetails/" + item.id} >{item.name}</Link>
                <Route exact path={"/Contactdetails/:id"} component={Contactdetails}></Route>
              </td>
              <td>
                <button onClick={this.onDelete}>
                  Delete
                                </button>
              </td>
            </tr>

          </tbody>
        </table>
        {/* <Link to="/">Delete</Link> */}
      </div>
    ));

    return (
      <div id="layout-content" className="layout-content-wrapper">
        <div className="panel-list">{persons}</div>
      </div>
    );
  }

我已经在页面上显示了带有相应ID（参数）的所有标签。当我单击链接时，它并没有带我进入详细信息页面。在详细页面中，我也在render方法中保持了警报，但它也没有出现，因此，我认为detailpage没有得到调用。

class Contactdetails extends Component {
    constructor(props) {
        super(props);
        this.state = {

        };
    }
    componentWillMount(){
        alert("Helloo");
    }

    componentDidMount() {
        console.log("props: ", this.props.match)
        this.EmployeeDetails();
    }

    EmployeeDetails() {
        fetch('http://dummy.restapiexample.com/api/v1/employees')
            .then(response => response.json())
            .then(results => { this.setState({ employees: results }) });
    }
    render() {
        alert("Hello");
        return (
            <h2>Contact Details</h2>
        )
    }
};

StackBlitz链接： https://stackblitz.com/edit/react-f4eha2?file=Contactdetails.js

Answer 1

将详细信息页面路由添加到您的主路由器文件，而不是在ContactList.js中。这是因为您的应用程序从主路由器文件或页面中查找路由，所以永远都不会调用它。

<Switch>
  // Your Routes
  <Route exact path={"/Contactdetails/:id"} component={Contactdetails} />
  // The '/Contactdetails' route after /:id route since it will other wise not call the above one
</Switch>

Answer 2

您已经在ContactList组件中指定了路径为/contactDetails/:id的Route，如果Route不是contactList，则不会调用该路径，因此看不到ContactDetails组件。相反，您需要像这样定义路线

  <Route path="/contactList" component={ContactList} />
  <Route exact path={"/Contactdetails/:id"} component={Contactdetails} />
  <Route path="/addContact" component={AddContact} />

Working demo

Answer 3

在这种情况下，您需要首先实现路由器，该路由器可以注册应用程序的路由，例如

<Route path="/contactList" component={ContactList} />
<Route path="/addContact" component={AddContact} />

请检查有关它的详细信息React Router

ReactJS中的参数问题路由

3 个答案: