React路由器dom將數據從父組件傳遞到子路由器組件不傳遞props.match

Question

父組件 App.js 的內容：-

import React, { useEffect, useState } from "react";
import NavBar from "./components/NavBar";
import Signup from "./pages/Signup";
import Home from "./pages/Home";
import Book from "./pages/Book";

function App() {
  const [user, setUser] = useState();
  useEffect(() => {
    const token = "Bearer " + sessionStorage.getItem("token");
    if (token) {
      axios
        .get(process.env.REACT_APP_API_URL + "user/self", {
          headers: {
            Authorization: token,
            "Content-Type": "application/json",
          },
        })
        .then((res) => setUser(res.data));
    }
  }, []);

  return (
    <div className="container-fluid">
      <NavBar user={user} />
      <Route exact path="/" component={Home} />
      <Route path="/signup" component={Signup} />
      <Route exact path="/book/:id" component={() => <Book user={user} />} />
    </div>
  );
}

export default App;

對於路線：-

<Route exact path="/book/:id" component={() => <Book user={user} />} />

當我將組件值從 component={Book} 設置為 component={() => 我得到一個錯誤：-

TypeError：無法讀取未定義的屬性“參數”

那是因為我在 Book 組件中使用了“props.match.params.id”。

如何將帶有 props.match 的用戶 state 傳遞給他的 Book 組件？

Answer 1

這就是你使用組件道具的方式

<Route exact path="/book/:id" component={Book} />

考慮使用render prop 而不是component prop，如下所示：

<Route exact path="/book/:id" render={(routeProps) => <Book user={user} {...routeProps} />} />

Answer 2

component道具不是 function。 使用render而不是component道具。

render道具是一個 function 路由器道具 object 作為參數傳遞給它。 您可以將這些路由器道具傳遞給您的組件。

<Route exact path="/book/:id" render={(props) => <Book user={user} {...props} />} />

有關render道具的詳細信息，請參閱反應路由器文檔