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 2. méthode de requête, which La 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 Lors de l'obtention des paramètres, "this.props.match.params. nom" doit être utilisé dans cette méthode, et les paramètres lors de l'actualisation de la page seront également perdus.
L'environnement d'exploitation de ce tutoriel : système Windows 10, version React 17.0.1, ordinateur Dell G3.
Il existe trois façons de transmettre des valeurs dans les routes :
1.props.params (recommandé)
//Définir le routage <Router history={hashHistory}> <Route path='/user/:name' composant={UserPage}></Route> </Router>import { Router,Route,Link,hashHistory} from 'react -router';class App extends React.Component { render() { return ( <Link to="/user/sam">user</Link> // ou hashHistory.push("/user/sam"); ) } }Lorsque la page passe à la page UserPage, supprimez la valeur transmise :
exporter la classe par défaut 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 un objet ne peut pas être transmis. S'il est transmis, l'objet json peut être converti en chaîne, puis transmis après l'avoir transmis. , le json Convertit la chaîne en objet et extrait les données
//Définir l'itinéraire <Route path='/user/:data' component={UserPage}></Route>//Définir les paramètres var data = {id:3,name:sam,age:36};data = JSON. stringify(data);var path = `/user/${data}`;//Passer la valeur <Link to={path}>user</Link>//ou hashHistory.push(path);//Obtenir le paramètre var data = JSON.parse(this.props.params.data);var {id,name,age} = data;2.query (non recommandé : les paramètres de la page d'actualisation sont perdus)
La méthode de requête est très simple à utiliser, similaire à la méthode get du formulaire, et les paramètres sont transmis en texte brut.
//Définir l'itinéraire <Route path='/user' composant={UserPage}></Route>//Définir les paramètres var data = {id:3,name:sam,age:36};var path = { pathname:' /user', query:data,}//Pass value <Link to={path}>user</Link>//ou hashHistory.push(path);//Obtenir le paramètre var data = this.props.location.query ;var {id, nom, âge} = données ;3.state (non recommandé, les paramètres de la page d'actualisation sont perdus)
Le mode état est similaire au mode publication et son utilisation est similaire à la requête.
//Définir le routage <Route path='/user' composant={UserPage}></Route>//Définir les paramètres var data = {id:3,name:sam,age:36};var path = { pathname:' /user', state:data,}//Passer la valeur <Link to={path}>user</Link>//ou hashHistory.push(path);//Obtenir le paramètre var data = this.props.location.state ;var {id, nom, âge} = données ;Conseils spéciaux :
1. Utilisez this.props.match.params.name lors de l'obtention des paramètres.
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}/> //Si ce n'est pas le cas, passez ceci .props est un objet vide </section> </div> </DocumentTitle> ); } }export Todolist par défaut ;