Il existe plusieurs façons de transmettre des valeurs dans le routage de réaction

Il existe trois façons de transmettre des valeurs dans le routage de réaction : 1. méthode "props.params", qui peut transmettre une ou plusieurs valeurs, mais le type de chaque valeur est une chaîne et ne peut pas transmettre d'objet ; méthode , cette méthode est similaire à la méthode get dans le formulaire. Les paramètres sont passés en texte clair, mais les paramètres seront perdus lors de l'actualisation de la page ; 3. Méthode d'état, cette méthode utilise "this.props.match.params. name" lors de l'obtention des paramètres, et rafraîchit la page. Les paramètres sont également perdus.

L'environnement d'exploitation de ce tutoriel : système Windows 10, React version 17.0.1, ordinateur Dell G3.

Il existe plusieurs façons de transmettre des valeurs dans le routage de réaction

Il existe trois façons de transmettre des valeurs dans le routage

1.props.params (recommandé)

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

Lorsque la page passe à la page UserPage , supprimez la valeur transmise :

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

La méthode ci-dessus peut transmettre une ou plusieurs valeurs, mais le type de chaque valeur est une chaîne et ne peut pas transmettre d'objet. Si vous la transmettez, vous pouvez convertir l'objet json en chaîne et. puis transmettez-la. Convertissez la chaîne json en objet et supprimez les données

//定义路由
<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 (non recommandé : les paramètres de rafraîchissement de la page sont perdus)

la méthode de requête est très simple à utiliser, similaire à la méthode get. dans le formulaire, et les paramètres sont transmis en texte brut

//定义路由
<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 (non recommandé, les paramètres de rafraîchissement de la page sont perdus)

la méthode state est similaire à la méthode post et la méthode d'utilisation est similaire à 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;

Conseils spéciaux :

1, utilisez this.props.match lors de l'obtention des paramètres params.name

2, si vous imprimez dans un sous-composant, n'oubliez pas de transmettre this.props, comme suit :

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;

[Recommandations associées : tutoriel vidéo javascript, front-end web]

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!