A quoi sert réagir avec le routeur

react withrouter est utilisé pour envelopper un composant dans Route et transmettre les trois objets history, location et match de "react-router" dans l'objet props. La syntaxe d'introduction est "import{withRouter}from...".

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

À quoi sert React withrouter

La fonction de withRouter est que si quelque chose n'est pas un routeur, mais nous devons nous appuyer sur lui pour accéder à une page, comme cliquer sur le logo de la page pour revenir à la page d'accueil, alors nous pouvons utiliser withRouter Pour faire .withRouter, la fonction consiste à envelopper un composant dans Route, puis les trois objets historique, emplacement et correspondance de React-Router seront placés dans l'attribut props de ce composant (My. la compréhension peut être ajoutée après l'ajout de Navigation lors de l'écriture de la programmation, si vous ne voulez pas de Vue, vous pouvez l'utiliser.$router.push() globalement)

Passez les trois objets de l'historique, de l'emplacement et de la correspondance de React-Router dans l'objet props

Par défaut, il doit être routé. Seuls les composants qui correspondent au rendu ont this.props, ont des paramètres de routage et peuvent utiliser la méthode de saut de fonction. Exécutez this.props.history.push('/detail') pour accéder à la page de routage correspondante

Cependant, tous les composants ne sont pas directement connectés à l'itinéraire (passez à ce composant via l'itinéraire lorsque ces composants nécessitent des paramètres de routage, vous pouvez utiliser withRouter pour transmettre les paramètres de routage à ce composant). .Pour le moment, vous pouvez utiliser this.props

Comment utiliser withRouter ：

Par exemple, la page app.js n'est pas redirigée via le routage, mais s'ouvre directement en saisissant l'adresse depuis le navigateur. n'utilisez pas withRouter, this.props de ce composant sera vide et les accessoires ne pourront pas être exécutés history, location, match et d'autres méthodes, telles que : saut fonctionnel this.props.push('/detail')

Configuration. withRouter est très simple et ne nécessite que deux étapes : 1 introduction, 2 exécution, comme suit

import React,{Component} from 'react'
import {Switch,Route,NavLink,Redirect,withRouter} from 'react-router-dom' //引入withRouter
import One from './One'
import NotFound from './NotFound'
class App extends Component{
    //此时才能获取this.props,包含（history, match, location）三个对象
    console.log(this.props);  //输出{match: {…}, location: {…}, history: {…}, 等}
    render(){return (<div className=&#39;app&#39;>
            <NavLink to=&#39;/one/users&#39;>HOME</NavLink>
            <NavLink to=&#39;/one/companies&#39;>OTHER</NavLink>
            <Switch>
                <Route path=&#39;/one/:type?&#39; component={One} />
                <Redirect from=&#39;/&#39; to=&#39;/one&#39; exact />
                <Route component={NotFound} />
            </Switch>
        </div>)
    }
}
export default withRouter(App);  //这里要执行一下WithRouter

apprentissage recommandé : "

tutoriel vidéo React

"

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!