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

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

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

react routing で値を渡すにはいくつかの方法があります

routing で値を渡すには 3 つの方法があります

1.props.params (推奨)

//设置路由
 <Router history={hashHistory}>
    <Route path=&#39;/user/:name&#39; component={UserPage}></Route>
 </Router>
import { Router,Route,Link,hashHistory} from &#39;react-router&#39;;
class App extends React.Component {
  render() {
    return (      
        <Link to="/user/sam">用户</Link>
        // 或者
        hashHistory.push("/user/sam");
    )
  }
}

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

export default class UserPage extends React.Component{
    constructor(props){
        super(props);
    }
    render(){
        return(<div>this.props.match.params.name</div>)
    }
}

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

//定义路由
<Route path=&#39;/user/:data&#39; component={UserPage}></Route>
//设置参数
var data = {id:3,name:sam,age:36};
data = JSON.stringify(data);
var path = `/user/${data}`;
//传值
<Link to={path}>用户</Link>
//或
hashHistory.push(path);
//获取参数
var data = JSON.parse(this.props.params.data);
var {id,name,age} = data;

2.query (推奨事項ではありません: ページの更新パラメータが失われます)

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

//定义路由
<Route path=&#39;/user&#39; component={UserPage}></Route>
//设置参数
var data = {id:3,name:sam,age:36};
var path = {
  pathname:&#39;/user&#39;,
  query:data,
}
//传值
<Link to={path}>用户</Link>
//或
hashHistory.push(path);
//获取参数
var data = this.props.location.query;
var {id,name,age} = data;

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

state モードは post モードに似ており、その使用法は次のようになります。 query

//设置路由
<Route path=&#39;/user&#39; component={UserPage}></Route>
//设置参数
var data = {id:3,name:sam,age:36};
var path = {
  pathname:&#39;/user&#39;,
  state:data,
}
//传值
<Link to={path}>用户</Link>
//或
hashHistory.push(path);
//获取参数
var data = this.props.location.state;
var {id,name,age} = data;

特別なヒント:

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}/> //不传的话this.props为空对象
           </section>                   
           </div>
           </DocumentTitle>
       );
    }
 }
export default Todolist;

[関連する推奨事項: JavaScript ビデオ チュートリアル、Web フロント エンド]

以上がリアクションルーティングで値を渡すにはいくつかの方法がありますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。