react路由傳值

最後，修改新聞列表元件news.js

當我們點選新聞列表頁面的新聞時，頁面就會跳轉到詳情頁，但是在實際的執行中，當點選不同的新聞標題時，需要根據新聞id或者其他識別符號在詳情頁請求載入不同的新聞詳情，在新聞列表頁面，我們可以根據點選事件，知道我們當前新增的這條新聞的id，但是在詳情頁並不知道，所以需要在進行頁面跳轉的時候，將當前新聞的id作為引數進行傳遞，下面就總結如何在react中進行頁面間引數傳遞，主要包括動態路由和get傳參兩種方式。

所謂動態路由，就是將引數放置在路由中，然後在詳情頁面，根據路由後面帶的不同引數，載入不同的新聞詳情，主要分為三步操作。

1，在根元件頁面配置動態路由

2，在路由跳轉頁面動態傳參

此時，當我們再去點選新聞列表頁面的新聞，進行頁面跳轉的時候，就會在位址列中看到剛剛點選的新聞的id

3，獲取位址列中傳遞過來的引數

在需要獲取引數的詳情頁面，使用生命週期函式，獲取props物件中的值就可以了，這是獲取路由傳參的固定寫法，最後乙個aid取決於在根元件配置路由時的命名。

下面貼出主要**：

import react,  from 'react';
import  from "react-router-dom";
import home from './components/home';
import news from './components/news';
import content from './components/content';
render()  
/>
<
route 
path
="/news"
component
= />
<
route 
path
="/content/:aid"
component
= />
div>
router
>
div>
);  }
}

news.js

import react,  from 'react';
import  from "react-router-dom";
class news extends component ,,,
]};}render() 
>
<
link 
to=`}
>
link
>
li>
)                        })
}ul>
div>
);    }
}export default news;

content.js

import react,  from 'react';
class content extends component ;
}componentdidmount()
render() 
}export default content;

使用get傳參的時候，不要配置動態路由，只需要在進行頁面跳轉的時候將需要傳遞的引數接在路由後面就可以了。

此時，當我們點選新聞列表跳轉到詳情頁面時，位址列中就已經可以看到傳遞過來的引數了

我們在新聞詳情頁面獲取位址列中的引數。

content.js

此時肯定時不能直接使用了，我們可以通過js來處理獲取到的值，變成我們需要的格式，也可以借助第三方工具來處理，在使用第三方工具的時候，主要分為以下幾步：

1，首先在專案根目錄進行安裝：npm install url

2，在需要使用的元件裡面引入工具：import url from 'url';

3，在生命週期函式中使用：

news.js

import react,  from 'react';
import  from "react-router-dom";
class news extends component ,,,
]};}render() 
>
<
link 
to=`}
>
link
>
li>
)                        })
}ul>
div>
);    }
}export default news;

content.js

import react,  from 'react';
import url from 'url';
class content extends component ;
}componentdidmount()
render() 
}export default content;

react路由傳值

react 路由傳參

React路由傳參

react路由傳參

react路由傳值

react 路由傳參

React路由傳參

react路由傳參

相關推薦