Question

我一直在和React Router玩，尝试不同的事情，但是我碰到了这个问题。

当用户路由到简单的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>
    );
  }
}

当用户在反应路由器中导航到特定路线时，不会呈现任何子级

1 个答案: