Es gibt verschiedene Möglichkeiten, Werte beim React-Routing zu übergeben

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; Methode: Diese Methode ähnelt der Get-Methode im Formular. Die Parameter werden im Klartext übergeben, die Parameter gehen jedoch beim Aktualisieren der Seite verloren. 3. State-Methode: Diese Methode verwendet „this.props.match.params“. Name“ beim Abrufen von Parametern und aktualisiert die Seite. Parameter gehen ebenfalls verloren.

Die Betriebsumgebung dieses Tutorials: Windows 10-System, Reaktionsversion 17.0.1, Dell G3-Computer.

Es gibt mehrere Möglichkeiten, Werte beim React-Routing zu übergeben.

Es gibt drei Möglichkeiten, Werte beim Routing zu übergeben.

1.props.params (empfohlen)

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

Wenn die Seite zur UserPage-Seite springt , nehmen Sie den übergebenen Wert heraus:

export default class UserPage extends React.Component{
    constructor(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 kann kein Objekt übergeben. Wenn Sie ihn übergeben, können Sie das JSON-Objekt in eine Zeichenfolge umwandeln Übergeben Sie es dann. Konvertieren Sie die JSON-Zeichenfolge in ein Objekt und nehmen Sie die Daten heraus im Formular und die Parameter werden im Klartext übergeben Besondere Tipps:

1, verwenden Sie this.props.match, wenn Sie Parameter params.name abrufen2, denken Sie beim Drucken in einer Unterkomponente daran, this.props wie folgt zu übergeben:

//定义路由
<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;

[Verwandte Empfehlungen:

Javascript-Video-Tutorial

, Web-Frontend]

Das obige ist der detaillierte Inhalt vonEs gibt verschiedene Möglichkeiten, Werte beim React-Routing zu übergeben. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!