如何在 Reach Route 组件中使用所需的道具答案

【问题标题】：How to use required props in a Reach Route component如何在 Reach Route 组件中使用所需的道具
【发布时间】：2019-10-22 14:59:59
【问题描述】：

我正在使用 @reach/router 和 React。我创建了一个带有所需道具的路由组件。当应用程序挂载但路由未激活时，我会收到道具类型警告。

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

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 指定动态段中的道具是必需的，但我不想看到这个道具警告。

【问题讨论】：

你找到答案了吗？我遇到了同样的问题。

标签： reactjs react-proptypes reach-router

【解决方案1】：

您应该希望在用户组件内的路径前面放置一个/，如下所示：

<User path="users/:userId" />

<User path="/users/:userId" />

编辑：你想为你的链接做同样的事情 <Link to="users/abc">Sally</Link>

<Link to="/users/abc">Sally</Link>

【讨论】：