반응 라우팅에서 값을 전달하는 방법에는 여러 가지가 있습니다.

반응 라우팅에서 값을 전달하는 방법에는 세 가지가 있습니다. 1. 하나 이상의 값을 전달할 수 있는 "props.params" 메서드. 그러나 각 값의 유형은 문자열이므로 개체를 전달할 수 없습니다. 이 메소드는 양식의 get 메소드와 유사하지만 페이지를 새로 고치면 매개변수가 손실됩니다. 3. 매개변수를 가져올 때 "this.props.match.params. name"을 이 메서드에 사용해야 하며 페이지를 새로 고칠 때 매개변수도 손실됩니다.

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

반응 라우팅에서 값을 전달하는 방법에는 여러 가지가 있습니다.

경로에 값을 전달하는 방법에는 세 가지가 있습니다.

1.props.params (권장)

//라우팅 설정 <Router History={hashHistory}> <Route path='/user/:name' 컴포넌트={UserPage}></Route> </Router>import { Router,Route,Link,hashHistory} from 'react -router';class App 확장 React.Component { render() { return ( <Link to="/user/sam">user</Link> // 또는 hashHistory.push("/user/sam"); ​​​​) } }

페이지가 UserPage 페이지로 이동하면 전달된 값을 가져옵니다.

기본 클래스 내보내기 UserPage 확장 React.Component{ constructor(props){ super(props) } render(){ return(<div>this.props.match.params.name</div>) }}

위 메소드는 하나 이상의 값을 전달할 수 있지만, 각 값의 유형은 문자열이므로 객체를 전달할 수 없으며, 전달된 경우 json 객체를 문자열로 변환한 후 전달할 수 있습니다. , json 문자열을 객체로 변환하고 데이터를 꺼냅니다.

//경로 정의 <Route path='/user/:data' 구성 요소={UserPage}></Route>//매개 변수 설정 var data = {id:3,name:sam,age:36};data = JSON. stringify(data);var path = `/user/${data}`;//값 전달 <Link to={path}>user</Link>//또는 hashHistory.push(path);//매개변수 var 가져오기 데이터 = JSON.parse(this.props.params.data);var {id,name,age} = 데이터;

2.쿼리(권장하지 않음: 새로 고침 페이지 매개변수가 손실됨)

쿼리 메소드는 양식의 get 메소드와 유사하여 사용이 매우 간단하며 매개변수는 일반 텍스트로 전달됩니다.

//경로 정의 <Route path='/user' component={UserPage}></Route>//매개변수 설정 var data = {id:3,name:sam,age:36};var path = { pathname:' /user', query:data,}//값 전달 <Link to={path}>user</Link>//또는 hashHistory.push(path);//매개변수 가져오기 var data = this.props.location.query ;var {ID,이름,나이} = 데이터;

3.상태(권장되지 않음, 새로 고침 페이지 매개변수가 손실됨)

상태 모드는 포스트 모드와 유사하며 사용법은 쿼리와 유사합니다.

//라우팅 설정 <Route path='/user' 컴포넌트={UserPage}></Route>//매개변수 설정 var data = {id:3,name:sam,age:36};var path = { pathname:' /user', state:data,}//값 전달 <Link to={path}>user</Link>//또는 hashHistory.push(path);//매개변수 가져오기 var data = this.props.location.state ;var {ID,이름,나이} = 데이터;

특별 팁:

1. 매개변수를 가져올 때 this.props.match.params.name을 사용하십시오.

2. 하위 구성 요소에서 인쇄하는 경우 다음과 같이 this.props를 전달해야 합니다.

class Todolist extends Component { render() { return ( <DocumentTitle title="todolist"> <div id="home-container"> <section> <TodolistList {...this.props}/> //이것을 전달하지 않으면 .props는 빈 개체입니다. </section> </div> </DocumentTitle> ) } }기본 Todolist 내보내기;