Дочерние элементы не отображаются при переходе пользователя к определенному маршруту в реагирующем маршрутизаторе.

Question

Я играл с реагирующим маршрутизатором и пробовал разные вещи, и я просто столкнулся с этой проблемой.

Когда пользователь переходит на простой localhost:3000, происходит ожидаемая маршрутизация, и я вижу ParamsComponent, но когдапользователь переходит к localhost:3000/netflix, который является одной из ссылок, я не вижу дочерний компонент для рендеринга на экране.

Вот моя конфигурация маршрутизатора:

<Router>
  <Switch>
    <Route exact path="/" component={ParamsComponent} />
    <Route path="/:id" component={Child} />
  </Switch>
</Router>

Вот мой ParamsComponent компонент:

class ParamsComponent extends React.Component {
  render() {
    return (
      <div>
        <Router>
          <div>
            <h2>Accounts</h2>
            <ul>
              <li>
                <Link to="/netflix">Netflix</Link>
              </li>
              <li>
                <Link to="/zillow-group">Zillow Group</Link>
              </li>
              <li>
                <Link to="/yahoo">Yahoo</Link>
              </li>
              <li>
                <Link to="/modus-create">Modus Create</Link>
              </li>
            </ul>
          </div>
        </Router>
      </div>
    );
  }
}

export default ParamsComponent;

А вот мой Child компонент:

class Child extends React.Component {
  render() {
    const { match } = this.props;
    console.log("child", this.props);
    return (
      <div>
        <h3>ID: {match.params.id}</h3>
      </div>
    );
  }
}

export default Child;

Answer 1

У вас должен быть только один верхний уровень Router, чтобы каждый Link компонент получал тот же history объект через контекст, что и ваши Route компоненты.

Удалите Router из ParamsComponent, и оно будет работать.

class ParamsComponent extends React.Component {
  render() {
    return (
      <div>
        <h2>Accounts</h2>
        <ul>
          <li>
            <Link to="/netflix">Netflix</Link>
          </li>
          <li>
            <Link to="/zillow-group">Zillow Group</Link>
          </li>
          <li>
            <Link to="/yahoo">Yahoo</Link>
          </li>
          <li>
            <Link to="/modus-create">Modus Create</Link>
          </li>
        </ul>
      </div>
    );
  }
}