1. Params パラメータをルーティング コンポーネントに渡す
1.1. 使用法:
1.1.1. ルーティング リンクの書き方.
ルーティング リンクの URL に渡すパラメーターを追加します.
path の後に / パラメーターを追加します
. たとえば、tom,18 を渡したいとします
<Link to={
`/home/message/detail/tom/18`}>{
msgObj.title}</Link>
1.1.2. 登録ルートの書き方
登録ルートのパス内に受け付けるパラメータを宣言します
パスの後ろに / : 受け付けるパラメータの名前を追加します (この名前は任意で構いません。パラメータを受け取るために使用されます)
<Route path="/home/message/detail/:name/:age" component={
Detail}/>
1.1.3. params パラメータの受け取り方法
params パラメータは this.props.match.params にあり、
属性名は宣言した名前と同じです。
const {
name,age} = this.props.match.params
2. 検索パラメータをルーティングコンポーネントに渡す
2.1. 使い方:
2.1.1. ルーティングリンクの書き方
ルーティングリンクのURLに渡すパラメータを追加します パスの
後ろに/?パラメータ名=パラメータ値を追加します
パラメータが複数ある場合は後ろに追加します最初のパラメータ値。その後パラメータの書き込みを続けます。
たとえば、tom,18 を渡したいとします。
<Link to={
`/home/message/detail/?name=tom&age=18`}>{
msgObj.title}</Link>
2.1.2. 登録ルートの書き方
: 受け取り申告不要で普通に登録するだけ
<Route path="/home/message/detail" component={
Detail}/>
2.1.3. 検索パラメータの受け取り方法.
検索パラメータは this.props.location にあります.
内容は?name=tom&age=18. この形式は urlencoded と呼ばれるもので、
弊社で処理する必要があります。 querystring ツールを使用して
ツールを直接導入します。
import qs from 'qs' //老版本引入 querystring
最終執筆
const {
search } = this.props.location
const {
id,title} = qs.parse(search.slice(1))
//由于第一个字符是？，所以使用 slice 方法去除第一个字符
3. ルーティングコンポーネントに状態パラメータを渡す
3.1. 使用法:
3.1.1. ルーティング リンクの書き方
オブジェクトを to に渡します オブジェクトには 2 つの属性があります:
最初の属性 pathname: ルーティング アドレス
2 番目の属性 state: 渡したいパラメータが含まれるオブジェクト書かれた。
<Link to={
{
pathname:'/home/message/detail',state:{
name:'tom',age:18}}}>{
msgObj.title}</Link>
3.1.2. 登録ルートの書き方
: 受け取り申告不要で普通に登録するだけ
<Route path="/home/message/detail" component={
Detail}/>
3.1.3. 受信パラメータの書き方
状態パラメータは this.props.location.state にあります。
const {
name,age} = this.props.location.state
個人ブログ:残りの人生の勉強メモ