亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

React Router DOM 無法讀取位置狀態

React Router DOM 無法讀取位置狀態

慕沐林林 2022-06-05 11:07:31
我以前見過這個問題,但只適用于 Class 組件,所以我不確定如何將相同的方法應用于功能組件。這很簡單,我有一個鏈接<Link to={{ pathname="/first-page" state: { name: "First person" }>First Page</Link>,然后在組件FirstPage.js中我需要讀取name狀態,所以我嘗試了以下操作:import React from "react";export default props => {  React.useEffect(() => {     console.log(props)   }, []);   return (    <div>       <h1>First Page</h1>       <p>Welcome to first page, {props.location.state.name}</p>     </div>   );};我一直在閱讀React Router 位置文檔,它應該將狀態作為組件屬性傳遞,但事實并非如此。我很確定我做錯了什么或根本沒有看到。如果您想嘗試整個代碼,我將在這里留下一個CodeSandbox 項目來“測試”它。因此,關于我做錯了什么的任何想法?提前致謝。
查看完整描述

2 回答

?
繁星coding

TA貢獻1797條經驗 獲得超4個贊

這不是基于類與功能組件的問題,而是路由如何工作的問題。包裹的孩子不會收到路由參數,但使用Route's component、render或childrenprop 渲染的任何東西都會收到。


路由渲染方法


<Switch>

  <Route path="/first-page" component={FirstPage} />

  <Route path="/second-page" component={SecondPage} />

</Switch>

編輯 pedantic-banzai-dhz27


另一種選擇是使用withRouterHOC 導出修飾的頁面組件,或者如果是功能組件,則使用鉤子。


帶路由器


您可以通過高階組件訪問history對象的屬性和最接近的屬性 <Route>。 每當渲染時,都會將 updated 、和props 傳遞給包裝的組件。matchwithRouterwithRoutermatchlocationhistory


const FirstPage = props => {

  React.useEffect(() => {

    console.log(props)

  }, []);


  return (

    <div>

      <h1>First Page</h1>

      <p>Welcome to first page, {props.location.state.name}</p>

    </div>

  );

};


export default withRouter(FirstPage);

掛鉤


React Router 附帶了一些hooks允許您訪問路由器狀態并從組件內部執行導航的功能。


const FirstPage = props => {

  const location = useLocation();


  console.log(location);


  return (

    <div>

      <h1>First Page</h1>

      <p>Welcome to first page, {location.state.name}</p>

    </div>

  );

};


export default FirstPage;


查看完整回答
反對 回復 2022-06-05
?
吃雞游戲

TA貢獻1829條經驗 獲得超7個贊

我發現你的路由器有問題。而不是使用:


 <Route path="/first-page">

    <FirstPage/>

 </Route>

利用:


<Route path="/first-page" component={FirstPage}/>

否則使用 library 提供的鉤子let location = useLocation();,這樣你就可以訪問 location 對象。


查看完整回答
反對 回復 2022-06-05
  • 2 回答
  • 0 關注
  • 158 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號