Reactのルートパラメータの受け渡し

目次

1. ルーティングパラメータ

1. 動的ルーティングパラメータの受け渡し

2. クエリパラメータ 

3. 状態パラメータの受け渡し 

2.ルート傍受 

3. ルーティングモード

4.ルーター付き 


1.ルーティングパラメータ

1. 動的ルーティングパラメータの受け渡し

使用prop进行接收 props.match.params.参数名

2. クエリパラメータ 

this.props.history.push({
pathname: ‘路由’,
query:{参数名:参数值}
})
 
接收:
this.props.location.query.参数名

3. 状態パラメータの受け渡し 

this.props.history.push({
pathname: ‘路由’,
state:{参数名:参数值}
})
 
接收:
this.props.location.state.参数名

2.ルート傍受 

通常、ルートを作成するのは次のとおりです。 

<Route path="" component={组件}></Route>

書くこともできます 

<Route path="" render={(props) => {
  在这里我们可以进行路由拦截,处理一些东西,判断要显示那个组件
  由于我们在函数中组件已经实例化,我们在其他组件中通过props进行路由跳转会发生报错,拿不到props,所以我们需要在render函数中将
  props传入,将props传入组件中,例如:<Clird {...props}/>,这样就可以通过props进行跳转
}}></Route>

 3. ルーティングモード

HashRouter はハッシュ モードです。# を使用します。# を使用したくない場合は、HashRouter を BrowserRouter に変更できます。 

4.ルーター付き 

サブコンポーネントで props を取得できない場合、通常は withRouter() メソッドを使用してラップし、戻り値を新しい変数に割り当てます。この変数は、ラップした新しいコンポーネントです。このコンポーネントを元のコンポーネントに置き換えます。 

const 新组件名 = withRouter(组件名)

 

 

 

 

おすすめ

転載: blog.csdn.net/m0_67063430/article/details/129845630