reactjs - Reach Route コンポーネントで必要な props を使用する方法

Question

@reach/routerReactで使用しています。必要な小道具を使用してルート コンポーネントを作成します。アプリがマウントされたときに小道具タイプの警告が表示されますが、ルートはアクティブではありません。

この簡単な例は@reach/router docsから改作されています。

import React from "react";
import { render } from 'react-dom';
import PropTypes from 'prop-types';
import { Router, Link } from "@reach/router";

const App = ({ children }) => (
  <div>
    <nav>
      <Link to="/">Home</Link>{" "}
      <Link to="users/123">Bob</Link>{" "}
      <Link to="users/abc">Sally</Link>
    </nav>
    {children}
  </div>
);

const User = props => <h2>{props.userId}</h2>;

User.propTypes = {
  userId: PropTypes.string.isRequired
};

const Home = () => (
  <div>
    <h2>Welcome!</h2>
    <p>
      Select a user, their ID will be parsed from the URL and passed to the User
      component
    </p>
  </div>
);

render(
  <Router>
    <App path="/">
      <Home path="/" />
      <User path="users/:userId" />
    </App>
  </Router>,
  document.getElementById("root")
);

Homeコードは、コンポーネントではなくコンポーネントをレンダリングしUserます。それにもかかわらず、コンソールに次のエラーが表示されます。

Failed prop type: The prop `userId` is marked as required in `User`, but its value is `undefined`.

コンポーネントがレンダリングされない限り、このエラーが発生することはないと思います。

これを防ぐ方法はありますか？

を使用して動的セグメントからの小道具が必要であることを指定したいのですが、prop-typesこの小道具の警告を表示したくありません。