React Routes 和 Components 道具组合

Question

我有以下代码行：

<Route path="/users/:id" exact ><User url={structure.users} /></Route>

在用户组件中，我执行以下操作：

function User(props, {match}) {


    useEffect(() => {
        console.log(match);
        console.log(props);
    }, [props]);
    // ...
}

我删除了一些代码，因为我只想显示什么是必要的，但在这里我看到匹配是未定义的，但它应该有来自链接的 match.params.id。 我怎样才能做到这一点，以便我可以使用带有附加 ID 的 url 制作完整的 url？

Answer 1

React 组件仅接收单个 props object 参数。

使用Route的render道具，以便您可以将路由道具传递给组件。

<Route
  path="/users/:id"
  exact
  render={routeProps => <User url={structure.users} {...routeProps} />}
/>

或者，您可以使用useParams React 挂钩来访问当前Route的match.params 。

import { ...., useParams, .... } from 'react-router-dom';

function User(props) {
  const { id } = useParams();

  useEffect(() => {
    console.log(id);
    console.log(props);
  }, [props]);
  // ...
}