React Routes 和 Components 道具组合

【问题标题】：React Routes and Components prop mixReact Routes 和 Components 道具组合
【发布时间】：2021-03-18 22:24:21
【问题描述】：

我有以下代码行：

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

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

function User(props, {match}) {


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

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

【问题讨论】：

标签： javascript reactjs routes react-router react-router-dom

【解决方案1】：

React 组件只接收一个 props 对象参数。

使用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]);
  // ...
}

【讨论】：