ReactJS - 使用重定向組件傳遞道具

Question

你應該如何通過Redirect組件傳遞 props 而不讓它們暴露在 url 中？

像這樣<Redirect to="/order?id=123 />"嗎？ 我正在使用react-router-dom 。

Answer 1

您如何在不將其暴露在url中的情況下，將帶有Redirect組件的props傳遞出去？

像這樣<Redirect to="/order?id=123 />" ？ 我正在使用react-router-dom 。

Answer 2

您如何在不將其暴露在url中的情況下，將帶有Redirect組件的props傳遞出去？

像這樣<Redirect to="/order?id=123 />" ？ 我正在使用react-router-dom 。

Answer 3

您如何在不將其暴露在url中的情況下，將帶有Redirect組件的props傳遞出去？

像這樣<Redirect to="/order?id=123 />" ？ 我正在使用react-router-dom 。

Answer 4

您如何在不將其暴露在url中的情況下，將帶有Redirect組件的props傳遞出去？

像這樣<Redirect to="/order?id=123 />" ？ 我正在使用react-router-dom 。

Answer 5

您如何在不將其暴露在url中的情況下，將帶有Redirect組件的props傳遞出去？

像這樣<Redirect to="/order?id=123 />" ？ 我正在使用react-router-dom 。

Answer 6

使用功能組件/鈎子，react-router-dom 版本 5.2.0 並傳遞函數和常規道具：

使用@Barat Kumar 的回答，您還可以在此處了解如何使用重定向將函數作為道具傳遞和訪問。 請注意，訪問 property_id 道具的方式也有所不同。

路線是一樣的：

<Route path="/test/new" render={(props) => <NewTestComp {...props}/>}/>

重定向：

<Redirect
  to={{
    pathname: "/test/new",
    testFunc: testFunc,
    state: { property_id: property_id }
  }}
/>

訪問 NewTestComp 中的兩個道具：

 useEffect(() => {
   console.log(props.history.location.testFunc);
   console.log(props.history.location.state.property_id);          
 }, []);

請注意，“狀態”來自類組件中的使用。 在這里你可以使用任何你想要的名字，也可以像我們做函數一樣傳遞常規道具。 因此，從@Barat Kumar 接受的答案中稍微離開一點，您可以：

<Redirect
  to={{
    pathname: "/test/new",
    testFunc: testFunc,
    propetries: { property_id: property_id1, property_id2: property_id2},
    another_prop: "another_prop"
  }}
/>

並像這樣訪問那些：

console.log(props.history.location.testFunc);
console.log(props.history.location.propetries.property_id1);
console.log(props.history.location.propetries.property_id2);
console.log(props.history.location.another_prop);