มีหลายวิธีในการส่งผ่านค่าในการกำหนดเส้นทางแบบโต้ตอบ

มีสามวิธีในการส่งค่าในการกำหนดเส้นทางแบบโต้ตอบ: 1. วิธี "props.params" ซึ่งสามารถส่งผ่านค่าได้หนึ่งค่าขึ้นไป แต่ประเภทของแต่ละค่าเป็นสตริงและไม่สามารถส่งผ่านวัตถุได้ 2. วิธีการสืบค้น ซึ่งวิธีการนี้จะคล้ายกับวิธีการรับในรูปแบบข้อความที่ชัดเจน แต่พารามิเตอร์จะหายไปเมื่อรีเฟรชเพจ 3. วิธีระบุเมื่อได้รับพารามิเตอร์ "this.props.match.params. ต้องใช้ชื่อ" ในวิธีนี้ และพารามิเตอร์เมื่อรีเฟรชเพจจะหายไปด้วย จะหายไป

สภาพแวดล้อมการทำงานของบทช่วยสอนนี้: ระบบ Windows 10, รีแอคเวอร์ชัน 17.0.1, คอมพิวเตอร์ Dell G3

มีหลายวิธีในการส่งผ่านค่าในการกำหนดเส้นทางแบบโต้ตอบ

มีสามวิธีในการส่งค่าในเส้นทาง:

1.props.params (แนะนำ)

// ตั้งค่าการกำหนดเส้นทาง <ประวัติเราเตอร์={hashHistory}> <เส้นทางเส้นทาง='/ผู้ใช้/:ชื่อ' ส่วนประกอบ={UserPage}></เส้นทาง> </เราเตอร์>นำเข้า { เราเตอร์,เส้นทาง,ลิงก์,hashHistory} จาก 'react -router';class App ขยาย React.Component { render() { return ( <Link to="/user/sam">ผู้ใช้</Link> // หรือ hashHistory.push("/user/sam"); ​​​​) } }

เมื่อเพจข้ามไปที่หน้า UserPage ให้นำค่าที่ส่งผ่านออก:

ส่งออกคลาสเริ่มต้น UserPage ขยาย React.Component{ ตัวสร้าง (อุปกรณ์ประกอบฉาก) { super (อุปกรณ์ประกอบฉาก); } แสดงผล () { กลับ (<div>this.props.match.params.name</div>) }}

วิธีการข้างต้นสามารถส่งผ่านค่าได้ตั้งแต่หนึ่งค่าขึ้นไป แต่ประเภทของแต่ละค่าคือสตริง และไม่สามารถส่งผ่านวัตถุได้ หากส่งผ่านวัตถุ 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,ชื่อ,อายุ} = ข้อมูล;

2.query (ไม่แนะนำ: พารามิเตอร์รีเฟรชเพจหายไป)

วิธีการสืบค้นนั้นใช้ง่ายมาก คล้ายกับวิธี get ในแบบฟอร์ม และพารามิเตอร์จะถูกส่งผ่านเป็นข้อความธรรมดา

//กำหนดเส้นทาง <เส้นทางเส้นทาง='/ผู้ใช้' องค์ประกอบ={UserPage}></เส้นทาง>//ตั้งค่าพารามิเตอร์ var data = {id:3,name:sam,age:36};var path = { pathname:' /user', query:data,}//ส่งค่า <Link to={path}>ผู้ใช้</Link>//หรือ hashHistory.push(path);//รับพารามิเตอร์ var data = this.props.location.query ;var {id,ชื่อ,อายุ} = ข้อมูล;

3.state (ไม่แนะนำ พารามิเตอร์รีเฟรชเพจจะหายไป)

โหมดสถานะจะคล้ายกับโหมดโพสต์ และการใช้งานจะคล้ายกับการสืบค้น

//ตั้งค่าการกำหนดเส้นทาง <เส้นทางเส้นทาง='/ผู้ใช้' องค์ประกอบ={UserPage}></เส้นทาง>//ตั้งค่าพารามิเตอร์ var data = {id:3,name:sam,age:36};var path = { pathname:' /user', state:data,}//ส่งค่า <Link to={path}>ผู้ใช้</Link>//หรือ hashHistory.push(path);//รับพารามิเตอร์ var data = this.props.location.state ;var {id,ชื่อ,อายุ} = ข้อมูล;

เคล็ดลับพิเศษ:

1. ใช้ this.props.match.params.name เมื่อรับพารามิเตอร์

2. หากพิมพ์เป็นส่วนประกอบย่อย อย่าลืมส่ง this.props ดังนี้:

class Todolist ขยาย Component { render() { return ( <DocumentTitle title="todolist"> <div id="home-container"> <section> <TodolistList {...this.props}/> // ถ้าไม่ผ่านสิ่งนี้ .props เป็นวัตถุว่าง </section> </div> </DocumentTitle> ) } } ส่งออก Todolist เริ่มต้น;