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

반응 라우팅에는 값을 전달하는 세 가지 방법이 있습니다. 1. 하나 이상의 값을 전달할 수 있지만 각 값의 유형이 문자열이므로 객체를 전달할 수 없는 "props.params" 메서드 2. 쿼리; 메소드, 이 메소드는 양식의 get 메소드와 유사합니다. 매개변수는 일반 텍스트로 전달되지만 페이지를 새로 고치면 매개변수가 손실됩니다. 3. 상태 메소드는 "this.props.match.params. 매개변수를 얻을 때 이름"을 입력하고 페이지를 새로 고치면 매개변수도 손실됩니다.

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

리액트 라우팅에서 값을 전달하는 방법은 여러 가지가 있습니다.

라우팅에서 값을 전달하는 방법은 세 가지가 있습니다.

1.props.params (권장)

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

페이지가 UserPage 페이지로 이동할 때 , 전달된 값 꺼내기:

export default class UserPage extends React.Component{
    constructor(props){
        super(props);
    }
    render(){
        return(<div>this.props.match.params.name</div>)
    }
}

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

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

2.query를 꺼냅니다. (권장하지 않음: 새로 고침 페이지 매개변수가 손실됨)

query 방법은 사용하기가 매우 간단합니다.

//定义路由
<Route path=&#39;/user&#39; component={UserPage}></Route>
//设置参数
var data = {id:3,name:sam,age:36};
var path = {
  pathname:&#39;/user&#39;,
  query:data,
}
//传值
<Link to={path}>用户</Link>
//或
hashHistory.push(path);
//获取参数
var data = this.props.location.query;
var {id,name,age} = data;

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

state 메소드는 post 메소드와 유사하며 사용 방법도 유사합니다. query

//设置路由
<Route path=&#39;/user&#39; component={UserPage}></Route>
//设置参数
var data = {id:3,name:sam,age:36};
var path = {
  pathname:&#39;/user&#39;,
  state:data,
}
//传值
<Link to={path}>用户</Link>
//或
hashHistory.push(path);
//获取参数
var data = this.props.location.state;
var {id,name,age} = data;

특별 팁:

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}/> //不传的话this.props为空对象
           </section>                   
           </div>
           </DocumentTitle>
       );
    }
 }
export default Todolist;

[ 관련 추천: javascript 비디오 튜토리얼, 웹 프론트엔드]

위 내용은 반응 라우팅에서 값을 전달하는 방법에는 여러 가지가 있습니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!