react withrouter는 구성 요소를 Route로 래핑하고 "react-router"의 세 가지 기록, 위치 및 일치 개체를 props 개체에 전달하는 데 사용됩니다. 소개 구문은 "import{withRouter}from..."입니다.
이 튜토리얼의 운영 환경: Windows 10 시스템, 반응 버전 17.0.1, Dell G3 컴퓨터.
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='app'> <NavLink to='/one/users'>HOME</NavLink> <NavLink to='/one/companies'>OTHER</NavLink> <Switch> <Route path='/one/:type?' component={One} /> <Redirect from='/' to='/one' exact /> <Route component={NotFound} /> </Switch> </div>) } } export default withRouter(App); //这里要执行一下WithRouter
권장 학습: "
react 비디오 튜토리얼위 내용은 반응 withrouter의 사용법은 무엇입니까의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!