时间戳

首页 > 解决方案 > React Routes 和 Components 道具组合

javascript - React Routes 和 Components 道具组合

问题描述

我有以下代码行：

<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？

标签： javascriptreactjsroutesreact-routerreact-router-dom

解决方案

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

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

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

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

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

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

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

推荐阅读