Reactjs 如何在到达路线组件中使用所需道具

Reactjs 如何在到达路线组件中使用所需道具,reactjs,react-proptypes,reach-router,Reactjs,React Proptypes,Reach Router,我正在用React使用@reach/router。我使用所需的道具创建管线构件。当应用程序挂载但路线未激活时,我会收到道具类型警告 这个简单的例子改编自@reach/router 除非渲染组件,否则我不希望看到此错误 有没有办法防止这种情况发生 我想使用道具类型指定需要动态段中的道具,但我不想看到此道具警告。您应该在用户组件内的路径前面放置一个/,如下所示: import React from "react"; import { render } from 'react-dom'; impor

我正在用React使用
@reach/router
。我使用所需的道具创建管线构件。当应用程序挂载但路线未激活时,我会收到道具类型警告

这个简单的例子改编自
@reach/router

除非渲染组件,否则我不希望看到此错误

有没有办法防止这种情况发生


我想使用
道具类型指定需要动态段中的道具,但我不想看到此道具警告。

您应该在用户组件内的路径前面放置一个
/
,如下所示:

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")
);
Failed prop type: The prop `userId` is marked as required in `User`, but its value is `undefined`.