반응 withrouter의 사용법은 무엇입니까

react withrouter는 구성 요소를 Route로 래핑하고 "react-router"의 세 가지 기록, 위치 및 일치 개체를 props 개체에 전달하는 데 사용됩니다. 소개 구문은 "import{withRouter}from..."입니다.

이 튜토리얼의 운영 환경: Windows 10 시스템, 반응 버전 17.0.1, Dell G3 컴퓨터.

react withrouter의 사용법은 무엇인가요?

withRouter의 기능은 라우터가 아니지만 페이지 로고를 클릭하고 withRouter를 사용하면 .withRouter를 수행할 수 있습니다. 이 기능은 구성 요소를 Route로 래핑하는 것입니다. 그런 다음 세 가지 객체 기록, 위치 및 반응 라우터 일치가 이 구성 요소의 props 속성에 저장됩니다(My. 프로그래밍 작성 시 Navigation을 추가한 후 이해를 추가할 수 있습니다. Vue를 원하지 않으면 전역적으로 this.$router.push()를 사용할 수 있습니다.)

react-router의 기록, 위치 및 일치 항목 세 가지를 전달합니다. props 객체

기본적으로 라우팅되어야 합니다. 렌더링과 일치하는 구성요소만 this.props를 갖고 라우팅 매개변수를 가지며 함수 점프 메소드를 사용할 수 있습니다. this.props.history.push('/detail') 해당 라우팅 페이지로 이동

그러나 모든 구성 요소가 모두 경로에 직접 연결되는 것은 아닙니다(경로를 통해 이 구성 요소로 이동). 이러한 구성 요소에 라우팅 매개 변수가 필요한 경우 withRouter를 사용하여 이 구성 요소에 라우팅 매개 변수를 전달할 수 있습니다. . 이때 this.props를 사용하시면 됩니다

Router 사용방법 ：

예를 들어 app.js 페이지는 라우팅을 통해 리다이렉트 되지 않고, 브라우저에서 주소를 입력하면 바로 열립니다. withRouter를 사용하지 마세요. 이 구성 요소의 this.props는 비어 있으며 기록, 위치, 일치 및 다음과 같은 기타 메서드를 실행할 수 없습니다. 기능적 점프 this.props.push('/detail')

설정 withRouter는 매우 간단하며 다음과 같이 소개 1단계, 실행 2단계만 필요합니다.

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

권장 학습: "

react 비디오 튜토리얼

"

위 내용은 반응 withrouter의 사용법은 무엇입니까의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!