反応ルーティングでパラメーターを渡す 3 つの方法

ルーティングパラメータ

vue であれ、react であれ、リンクルーティングを介してジャンプする、
js を使用してパラメーターを渡す、
または this.props.history.push() ページジャンプ、
またはクエリ、
params を使用してパラメーターを渡すだけです。
通常、パラメータはパスの後に連結されます。または、オブジェクトの形式で渡すと、ページはそれを受け取ります。
一般的な方法について簡単に説明し、最後に、より一般的に使用される方法 (場所、状態)
について説明します。

**1. paramsでパラメータを渡す
1. ページを更新してもパラメータが消えない
2. アドレスバーにパラメータが表示される
3. Routeでパラメータ名を設定する必要がある
デメリット: 渡すのが不便値が多すぎると、URL が非常に長くなります。
2: クエリパラメーターの受け渡し: ルーティングページ (構成は不要)
利点: エレガントなパラメーターの受け渡し、パラメーターを介してオブジェクトを渡すことができます;
デメリット: アドレスバーを更新すると、パラメーターが失われます。
3. 検索パラメーターの受け渡し
利点: ページの更新、パラメーターが失われない;
欠点: あまりにも多くの値を渡すと、URL が非常に長くなります。
4: 状態パラメーターを渡す
パラメーターは、ページを更新しても消えず、
パラメーターはアドレスバーのルーティングページに表示されません
(構成は不要です)
利点: エレガントなパラメーターの受け渡し、パラメーターの受け渡しでオブジェクトを渡すことができます;
デメリット: HashRouter を使用している場合は、更新しますページ、パラメーターが失われます;
* *

詳細な
説明パラメータは params を介して渡されると仮定します。最初に簡単なルートを設定しましょう。

ルーティング構成ページ

<Route path="/Capacity/manage/craft/view/:Id" component={production} />

パラメータ

1 リンクパラメータ転送、ルーティングジャンプ

这种写法我通常是在表格中使用，因为通过row我们可以直接拿到选中行的 Id, 直接给link就好了。
	
	 {
	    title: '工艺编码',
	    dataIndex: 'techCode',
	    align: 'center',
	    render: (value, record) => {
	      const { id } = record || {}; // recoed 就是选中行的信息 ，在这里解构赋值id ,直接拼接给跳转的路由就OK
	      return <Link to={`/Capacity/manage/craft/view/${id}`}>{value}</Link>;
	    }
	    // 或者 <Link to={ '/Capacity/manage/craft/view' + '121211'}>详情</Link> 
	    // 或者 <Link to={
   
   {pathname: '/Capacity/manage/craft/view/' + '121212'}}>跳转</Link>
	  },

ページの受信はフック関数で直接確認されます。
ここに画像の説明を挿入
もちろん、新しい値を設定することを約束するには、検証時に自分で id 値を指定する必要があります。

 async componentDidMount() { 
    this.setState({
      id: this.props?.match?.params?.id
    });
    await this.findDeatil(this.state.id); // 拿到这个id 去调取详情、编辑或者其他接口就好了。
  }

2 js を使用してパラメーターを渡します。

this.props.router.push({
	pathname: '/Capacity/manage/craft/view/' + '12121'
});
或者
this.props.router.push(
	'/Capacity/manage/craft/view/'+'105'
);

別のページからパラメーターを取得する

this.props.match.params.id

params で複数のパラメータを渡す場合

ルーティングページ

<Route path='/production/:productionId/:productionType' component={production}></Route>

jは、ページ内の構成が次のようになっていることを前提としています

state = {
     productionId: 120,
     productionType: 'fruits'
 }

リンクを使用してパラメーターを渡す

<Link to={
   
   {
	pathname:
	`/production/${this.state.productionId}/${this.state.productionType}`
}}>跳转</Link>

js を使用してパラメーターを渡す

this.props.router.push({
	pathname:
		`/demo/${this.state.productionId}/${this.state.productionType}`
});

パラメータを取得する

this.props.match.params

クエリパラメータ

ルーティングページ (構成は不要)

<Route path='/production' component={production}></Route>

リンクを使用してパラメーターを渡す

<Link to={
   
   {pathname:'/production',query:{productionId:120,productionType:'fruits'}}}>跳转</Link>

js を使用してパラメーターを渡す

this.props.router.push({pathname:'/production',query:{productionId:120,productionType:'fruits'}});

パラメータ取得

this.props.location.query

3、状態これは、パラメータが消えない後にページを更新するためにも一般的に使用されますパラメータはアドレスバーに表示されません

ルーティングページ (構成は不要)

<Route path='/production' component={production}></Route>

リンクを使用してパラメーターを渡す

<Link to={
   
   {
	pathname:
		'/production',
		state:{
			productionId:12,
			productionType:'fruits'
		}
	}}>跳转</Link>

js を使用してパラメーターを渡す

this.props.router.push({
	pathname:
	 '/production',
	 state:{
	 	productionId:12,
	 	productionType:'fruits'
	 }
});

パラメータを取得する

this.props.location.state

またはあなたがする

 handleview = ({ selectedRows }) => {
    let row = selectedRows[0];
    console.log(row);
    // 去采购订单页面 传选中行的itemId
    this.props.push({
      pathname: `/purc/purcorder/index`,
      state: { // 这里可以接收你传的任何方式，可以是对象，可以是数组。注意的是接受的页面记得处理你的数组或者对象，要保持一致。
        itemIds: [
          {
            id: row.itemId,
            itemCode: row.itemCode,
            itemName: row.itemName
          }
        ]
      }
    });
  };

4.検索

ルーティングページ

<Route path='/web/departManange ' component={DepartManange}/>

設定ページ

<link to="web/departManange?tenantId=12121212">xxx</Link>
	或者
this.props.history.push({pathname:"/web/departManange?tenantId" + row.tenantId});

パラメータの読み取りに使用: this.props.location.search