Маршрутизация с выдачей параметров в ReactJS

Question

Я делаю простой список сотрудников и детальную демонстрацию в ReactJS. У меня есть компонент списка сотрудников, который показывает список всех выборок сотрудников из какого-то фиктивного веб-сервиса отдыха и показывает на странице.

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

Я показал все теги с соответствующим идентификатором (параметром) на странице. Проблема, когда я нажимаю на ссылку, это не приводит меня к странице подробностей. На странице с подробностями я также держал бдительность в методе рендеринга, но он также не появляется, поэтому я думаю, что страница с подробностями не получает вызов.

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

Вы указали Маршрут с путем /contactDetails/:id в компоненте ContactList, который не будет вызываться, если Маршрут не contactList и, следовательно, вы не видите компонент ContactDetails. Вместо этого вам нужно определить свои маршруты как

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

Рабочая демоверсия

Answer 3

В этом случае вам необходимо сначала внедрить маршрутизатор, который может регистрировать маршруты вашего приложения, например

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

Пожалуйста, проверьте информацию об этом React Router