Terdapat beberapa cara untuk menghantar nilai dalam penghalaan tindak balas

Terdapat tiga cara untuk menghantar nilai dalam penghalaan tindak balas: 1. Kaedah "props.params" ini boleh melepasi satu atau lebih nilai, tetapi jenis setiap nilai ialah rentetan dan tidak boleh melepasi satu objek; 2. Kaedah pertanyaan, kaedah ini serupa dengan kaedah dapatkan dalam bentuk Parameter dihantar dalam teks yang jelas, tetapi parameter akan hilang apabila menyegarkan halaman 3. Nyatakan kaedah, kaedah ini menggunakan "this.props .match.params.name" apabila mendapatkan parameter. , dan parameter halaman muat semula juga akan hilang.

Persekitaran pengendalian tutorial ini: Sistem Windows 10, bertindak balas versi 17.0.1, komputer Dell G3.

Terdapat beberapa cara untuk menghantar nilai dalam penghalaan tindak balas

Terdapat tiga cara untuk menghantar nilai dalam penghalaan

1.props.params ( disyorkan)

//设置路由
 <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");
    )
  }
}

Apabila halaman melompat ke halaman Halaman Pengguna, keluarkan nilai yang diluluskan:

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

Kaedah di atas boleh melepasi satu atau lebih nilai, tetapi jenis setiap nilai ialah aksara String tidak boleh lulus objek. Jika anda lulus, anda boleh menukar objek json menjadi rentetan dan kemudian menghantarnya, tukar rentetan json menjadi objek dan keluarkan data

//定义路由
<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 (tidak disyorkan: Parameter halaman muat semula hilang)

Kaedah pertanyaan sangat mudah digunakan, sama seperti kaedah get dalam bentuk, dan parameter dihantar dalam teks biasa

//定义路由
<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 (tidak disyorkan, parameter halaman muat semula hilang)

Kaedah keadaan adalah serupa dengan siaran kaedah dan kaedah penggunaan adalah serupa dengan pertanyaan

//设置路由
<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;

Petua istimewa:

1 Apabila mendapatkan parameter, gunakan this.props.match.params.name

2. Jika mencetak dalam subkomponen, ingat untuk lulus this.props, seperti berikut:

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;

[Cadangan berkaitan: tutorial video javascript, bahagian hadapan web]

Atas ialah kandungan terperinci Terdapat beberapa cara untuk menghantar nilai dalam penghalaan tindak balas. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!