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