2017-12-12 13 views
0

텍스트 파일을 변수로 읽어야합니다.React Router를 사용하여 파일 받기

파일의 URL과 함께 가져 오기 명령을 사용했지만 내 nginx 웹 서버가 모든 쿼리를 React에 전달하도록 구성되어있어 작동하지 않았습니다.

그리고 React가 정적 파일을 제공하지 않거나 일부 경로를 정의해야 할 수도 있습니다.

nginx 구성을 해킹하는 문제가 해결되었지만 해킹이 너무 많아서 React 라우팅이나 다른 것을 사용해야한다고 들었습니다.

그래서, 나는 누구의 URL을 내가 작성하는 경우 http://www.example.com/rankitapp/src/T9tutorial/dictionary.txt

을하는 파일이 상상 가져 오기 : 그것은 내가 nginx를 구성을 해킹 할 경우에만 작동

fetch("/rankitapp/src/T9tutorial/dictionary.txt") 
    .then((response) => response.text()) 
    .then(function(data) { 

     t9init(data); 

    }) 

.

nginx가 모든 쿼리를 React에 전달하는 원래의 표준 구성에서는 작동하지 않습니다.

내가 nginx를 해킹 할 수 없다는 것을 알고 있다면, 어떻게 그 파일을 가져올 수 있습니까?

몇 가지 특별한 경로를 만들 수 있습니까?

다른 명령어를 사용하여 파일을 변수로 가져옵니다.

답변

0

우리는 fetch 대신 Axios를 사용합니다. HTTP 상태 오류를 훨씬 잘 처리하는 것처럼 처리합니다. JSON 파일을 통해 환경 변수를 줄일 수 있도록 설정했습니다.

이는 문제의 일부가 될 수 있었던 것처럼 소리 : 당신이 그것을 사용하기 전에 "텍스트로 응답을 변환"

.then(response => response.text()) 

. 이 Axios의를 사용하는 아이디어 주셔서 감사합니다 Axios vs Fetch

+0

에 대한 읽기 가치가

const request = { url: 'http://example.com/my/file.text', method: 'GET' }; return axios(request) .then((response) => { // response.data has our data/values // we take the raw JSON and shove this into our redux state. // No parsing or anything like that. // No need to run response.text() on it }) .catch((error) => { dispatch(failureHandler(error)); }); 

: 같은

우리의 코드가 보인다. Nginx가 모든 http 쿼리를 React에 전달하기 때문에 필자의 경우 URL http://example.com/my/file.text가 React에 의해 처리됩니다. React는 텍스트 파일을 다시 제공하는 방법을 모릅니다.이 경우 file.txt입니다. Nginx 구성을 변경해서는 안되며 React 라우팅 사용 방법을 더 잘 알아야한다고 들었습니다. 귀하의 경우 Nginx 또는 Apache 구성에 웹 서버가 file.txt와 같은 파일을 제공하여 해당 React를 무시한다고 가정합니다. 아니면 다른 것입니다. –

+0

.then (response => response.text()) 부분은 파일이 JSON이 아닌 텍스트이기 때문에 OK입니다. –