react : REST API 용 URL을 전달하는 방법

Question

학습을 시작하고 이에 대한 답변을 인터넷에서 찾을 수 없습니다. 어쩌면 어떤 용어를 사용해야할지 모르겠다.

내 백엔드가 django이고 REST API 용 URL을 내 프런트 엔드에 전달할 수 있기를 원합니다.
나는 django에 이미 정의되어 있기 때문에 반응에 열심히 코딩하고 싶지 않습니다.
URL 값을 포함하는 객체가 포함 된 HTML 태그에 script 태그를 렌더링하고 싶습니다.

장고 템플릿

<script type="text/javascript"> 
    var CONFIG = { 
    some_url : '{% url "my-api" %}' 
    } 
</script> 

같은 것 (장고에 익숙하지 않은 사람들을 위해, 즉 {%의 URL을 %} 태그를 렌더링하는 URL을 같은/경로// myapi에) 내 반작용 상점에서 그런

/액션 나는 CONFIG.some_url을 참조 할 것입니다.

올바른 방법인가요? 또는이 정보를 내 반응 구성 요소에 제공하는 더 좋은 방법이 있습니까?

------------ 편집 ----------------- jsx 파일을 transpile하는 웹팩을 사용하고 통합 할 수 django-webpack-loader를 사용하여

모두. 이는 jsx가 맨 위에로드되기 전에 django 템플릿이 완전히 렌더링되었음을 의미합니다.
그 결과 템플릿 태그를 jsx 파일 내에서 실행할 수 없습니다. 소품으로

Answer 1

는 패스를 :

<MyComponent src={% url %} /> 

Answer 2

넣어 당신의 웹팩 구성 플러그인 다음 - 다음과 같이

plugins: [ 
    new webpack.DefinePlugin({ 
    'process.env': { 
     'NODE_ENV': JSON.stringify(process.env.environ), 
    } 
    }) 
    ], 

가 웹팩 명령을 실행 -

environ=local webpack 

또는

environ=production webpack -p //for production 

위의 환경 변수 (local, dev, production)에 따라 API URL을 반환하는 함수를 유지하는 상수 파일을 만듭니다. 당신의 componentDidMount에서

const api_url=function(){ 
    let api_url=//production api url 
    if(process.env.NODE_ENV == 'local'){ 
    //local api url 
    } 
    else if(process.env.NODE_ENV == 'development'){ 
    //dev api url 
    } 
    return api_url; 
} 

export const url= api_url(); 

가져 오기이()

Answer 3

일단 django-webpack-loader보고 난 강력하게 제안 당신이 장고를 사용하는 경우 Axios의

import {url} from ../constants 

componentDidMount(){ 
    //api call 
} 

/아약스/가져 오기를 사용하여 API를 호출과 함께 반응

django-webpack-loader (나도 마찬가지)를 사용하고 있지만 여전히 React 앱에 소품을 전달할 수 있습니다. 다음과 같이 진행할 수 있습니다 :

1)보기에서 절대 백엔드 URL을 확인하십시오.평 :

def get_context_data(self, **kwargs): 
    context['APIROOT_URL'] = reverse('api-root', request=self.request) 
    return context 

2)이 같은 속성을 가져, 마지막으로 앱이 내부의 HTML 템플릿

<div id="react-app"></div> 

<script> 
    window.__APIROOT_URL__= '{{ APIROOT_URL }}'; 
    window.react_mount = document.getElementById('react-app'); 
</script> 
{% render_bundle 'main' %} 

3)에 상황에 맞는 소품을 전달합니다

const apirootUrl = window.__APIROOT_URL__