섹션 08, 라우팅: 라우팅을 통해 값을 전달하는 방법

카탈로그

카탈로그

가장 일반적인 전송

다중 매개 변수 전송

개발 과정에서 루트 사이의 전가는 반드시 없어서는 안 된다. 비록 React는 더욱 우아한 방식을 가지고 있지만.

가장 흔히 볼 수 있는 전가

전가는 비교적 간단하다.값을 전달할 때 주로 props에 의존하여 수신한다.라우팅과 페이지 사이의 전송 값도 비슷합니다.코드는 여전히 윗부분에 이어서 작성한다.
먼저nav.js 페이지 전송 값, 아래 코드를 보십시오. 전송 값은 IloveWeb입니다.

<NavLink  to="/Jscomponentc/ILoveWeb" activeClassName="active">component-cNavLink>| 

우리는 루트에서 루트를 알려주지 않으면 포획할 수 없기 때문에 루트에서 값을 설정해야 한다. 여기에는 사칭 (:) 으로 루트를 알려야 한다.

<Route  path="/Jscomponentc/:param" component={Jscomponentc} />

출력 매개 변수 앞에서 jscomponentc.js 페이지의 성명 주기에서 이때의 프로포즈에 어떤 값이 있는지 살펴보고 이해한 후에 출력을 진행합니다.

import React from "react";

export default class jscomponentc extends React.Component{
    componentWillMount(){
        console.log(this.props);
    }
    render(){
        return(
          <div>c  div>
        );
    }
}

우리는 match 아래의 params에서 우리의 매개 변수를 발견할 수 있으며, 이때 우리는 페이지에 인쇄할 수 있다.인쇄 코드는 다음과 같습니다.

import React from "react";

export default class jscomponentc extends React.Component{
    componentWillMount(){
        console.log(this.props);
    }
    render(){
        return(
          <div>c  ,  ：{this.props.match.params.param}div>
        );
    }
}

다중 매개 변수 전송값

jscomponent.js

<div>c  ,  ：{this.props.match.params.param} {this.props.match.params.other}div>

index.js

<Route path="/Jscomponentc/:param/:other" component={Jscomponentc} />

nav.js

<NavLink to="/jscomponentc/ILoveWeb/secondCode" activeClassName="active">jscomponent-cNavLink>