Es gibt drei Möglichkeiten, Werte beim React Routing zu übergeben: 1. „props.params“-Methode, die einen oder mehrere Werte übergeben kann, aber der Typ jedes Werts ist eine Zeichenfolge und kann kein Objekt übergeben; 2. Abfragemethode; Die Methode ähnelt der Get-Methode im Formular. Die Parameter werden jedoch beim Aktualisieren der Seite verloren. 3. State-Methode. Bei dieser Methode muss „Name“ verwendet werden und die Parameter gehen beim Aktualisieren der Seite ebenfalls verloren.
Die Betriebsumgebung dieses Tutorials: Windows 10-System, Reaktionsversion 17.0.1, Dell G3-Computer.
Es gibt drei Möglichkeiten, Werte in Routen zu übergeben:
1.props.params (empfohlen)
//Routing festlegen <Router History={hashHistory}> <Route path='/user/:name' Component={UserPage}></Route> </Router>import { Router,Route,Link,hashHistory} from 'react -router';class App erweitert React.Component { render() { return ( <Link to="/user/sam">user</Link> // or hashHistory.push("/user/sam"); ) } }Wenn die Seite zur UserPage-Seite springt, nehmen Sie den übergebenen Wert heraus:
Standardklasse exportieren UserPage erweitert React.Component{ constructionor(props){ super(props); } render(){ return(<div>this.props.match.params.name</div>) }}Die obige Methode kann einen oder mehrere Werte übergeben, aber der Typ jedes Werts ist eine Zeichenfolge, und ein Objekt kann nicht übergeben werden. Wenn es übergeben wird, kann das JSON-Objekt in eine Zeichenfolge umgewandelt und dann übergeben werden , die JSON-Konvertierungszeichenfolge in ein Objekt umwandeln und Daten herausnehmen
//Route definieren <Route path='/user/:data' Component={UserPage}></Route>//Parameter festlegen var data = {id:3,name:sam,age:36};data = JSON. stringify(data);var path = `/user/${data}`;//Wert übergeben <Link to={path}>user</Link>//oder hashHistory.push(path);//Parameter var abrufen data = JSON.parse(this.props.params.data);var {id,name,age} = data;2. Abfrage (nicht empfohlen: Parameter der Aktualisierungsseite gehen verloren)
Die Abfragemethode ist sehr einfach zu verwenden, ähnlich der Get-Methode im Formular, und die Parameter werden im Klartext übergeben.
//Route definieren <Route path='/user' Component={UserPage}></Route>//Parameter festlegen var data = {id:3,name:sam,age:36};var path = { pathname:' /user', query:data,}//Wert übergeben <Link to={path}>user</Link>//oder hashHistory.push(path);//Parameter abrufen var data = this.props.location.query ;var {id,name,age} = data;3.Status (nicht empfohlen, Parameter für die Aktualisierungsseite gehen verloren)
Der Statusmodus ähnelt dem Postmodus und seine Verwendung ähnelt der Abfrage.
//Routing festlegen <Route path='/user' Component={UserPage}></Route>//Parameter festlegen var data = {id:3,name:sam,age:36};var path = { pathname:' /user', state:data,}//Wert übergeben <Link to={path}>user</Link>//oder hashHistory.push(path);//Parameter abrufen var data = this.props.location.state ;var {id,name,age} = data;Besondere Tipps:
1. Verwenden Sie this.props.match.params.name, wenn Sie Parameter abrufen.
2. Denken Sie beim Drucken in einer Unterkomponente daran, this.props wie folgt zu übergeben:
class Todolist erweitert Component { render() { return ( <DocumentTitle title="todolist"> <div id="home-container"> <section> <TodolistList {...this.props}/> //Wenn nicht, übergeben Sie dies .props ist ein leeres Objekt </section> </div> </DocumentTitle> );