javascript - 当用户导航到 react 路由器中的特定路线时，不会呈现任何 child

Question

我一直在玩 React 路由器并尝试不同的东西，但我遇到了这个问题。

当用户路由到简单的 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 组件。

从 ParamsComponent 中删除 Router，它就会工作。

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