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

Question

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

这个简单的例子改编自@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")
);

该代码呈现Home组件，而不是User组件。尽管如此，我可以在控制台中看到以下错误：

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

除非对组件进行渲染，否则我不希望看到此错误。

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

我想使用prop-types指定动态段中的道具是必需的，但我不想看到这个道具警告。

Answer 1

您应该想在用户组件中的路径前面放一个/，如下所示：

<User path="users/:userId" /><~您的代码

<User path="/users/:userId" /><~您的解决方案

编辑：你想对你的链接做同样的操作<Link to="users/abc">Sally</Link><~您的代码

<Link to="/users/abc">Sally</Link><~您的解决方案