リアクションルーティングで値を渡すにはいくつかの方法があります

反応ルーティングで値を渡すには 3 つの方法があります。 1. 1 つ以上の値を渡すことができる「props.params」メソッド。ただし、各値の型は文字列であり、オブジェクトを渡すことはできません。このメソッドはフォームの get メソッドと似ています。パラメータはクリア テキストで渡されますが、ページを更新するとパラメータは失われます。このメソッドでは「name」を使用する必要があり、ページを更新するときのパラメータも失われます。

このチュートリアルの動作環境: Windows 10 システム、React バージョン 17.0.1、Dell G3 コンピューター。

リアクションルーティングで値を渡すにはいくつかの方法があります

ルートで値を渡すには 3 つの方法があります。

1.props.params (推奨)

//ルーティングを設定します <Routerhistory={hashHistory}> <Route path='/user/:name' component={UserPage}></Route> </Router>import { Router,Route,Link,hashHistory} from 'react -router';class App extends React.Component { render() { return ( <Link to="/user/sam">user</Link> // または hashHistory.push("/user/sam"); ) } }

ページが UserPage ページにジャンプしたら、渡された値を取り出します。

デフォルトクラスをエクスポート UserPage extends React.Component{ constructionor(props){ super(props) } render(){ return(<div>this.props.match.params.name</div>) }}

上記のメソッドは 1 つ以上の値を渡すことができますが、各値の型は文字列であり、オブジェクトを渡すことはできません。json オブジェクトを文字列に変換して渡すことができます。 、json 文字列をオブジェクトに変換してデータを取り出す

// ルートを定義します <Route path='/user/:data' component={UserPage}></Route>// パラメータを設定します var data = {id:3,name:sam,age:36};data = JSON。 stringify(data);var path = `/user/${data}`;//値を渡す <Link to={path}>user</Link>//または hashHistory.push(path);//パラメータ var を取得データ = JSON.parse(this.props.params.data);var {id,name,age} = データ;

2.query (非推奨: ページの更新パラメータが失われます)

query メソッドはフォームの get メソッドと同様に非常に簡単に使用でき、パラメータはプレーン テキストで渡されます。

//ルートを定義します <Route path='/user'component={UserPage}></Route>//パラメータを設定します var data = {id:3,name:sam,age:36};var path = { pathname:' /user', query:data,}// 値を渡す <Link to={path}>user</Link>// または hashHistory.push(path);// パラメータを取得 var data = this.props.location.query ;var {id,name,age} = データ;

3.state (推奨されません。更新ページのパラメータは失われます)

状態モードはポストモードに似ており、その使用法はクエリに似ています。

//ルーティングを設定します <Route path='/user'component={UserPage}></Route>//パラメータを設定します var data = {id:3,name:sam,age:36};var path = { pathname:' /user', state:data,}//値を渡す <Link to={path}>user</Link>//または hashHistory.push(path);// パラメータを取得 var data = this.props.location.state ;var {id,name,age} = データ;

特別なヒント:

1. パラメータを取得する場合は、this.props.match.params.name を使用します。

2. サブコンポーネントで印刷する場合は、次のように this.props を忘れずに渡します。

class Todolist extends Component { render() { return ( <DocumentTitle title="todolist"> <div id="home-container"> <section> <TodolistList {...this.props}/> //そうでない場合はこれを渡す.props は空のオブジェクトです </section> </div> </DocumentTitle> ) } }デフォルトの Todolist をエクスポートします。