Netlify는 페이지 갱신 시 404를 렌더링합니다(React 및 React 라우터 사용).

programing

Netlify는 페이지 갱신 시 404를 렌더링합니다(React 및 React 라우터 사용).

copyandpastes 2023. 3. 15. 23:35

Netlify는 페이지 갱신 시 404를 렌더링합니다(React 및 React 라우터 사용).

Netlify를 사용하여 사이트를 전개했는데 라우팅에 문제가 있습니다.

여기 제 웹사이트 https://redux-co.netlify.com/가 있습니다.

그리고 제 GitHub 보고서: https://github.com/jenna-m/redux-co

특히 사용자가 홈 페이지 이외의 페이지로 이동하여 페이지를 새로 고치면 기본 Netlify 404가 렌더링됩니다.404 페이지에서 홈 페이지로 돌아가서 새로 고치면 홈 페이지가 렌더링됩니다.

404 하지 않습니다.localhost:3000, 404이를 먼저

React와 react-router를 사용하고 있는데, react-router를 사용하고 있기 때문에 웹 사이트가 즉시 전개되지 않는 것을 알고 있습니다.

은 나의 ★★★★★★★★★★★★★★★★★★★★입니다._redirects 「」, 「」, 「」, 「」, 「」에 파일,/public의 내폴이 폴더index.html 삭제:

/*    /index.html   200

은 나의 ★★★★★★★★★★★★★★★★★★★★입니다.“build”치치에 package.json:

…
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build && cp build/index.html build/404.html",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  }
…

나는 다른 사람들이 이런 경험을 하고 문제를 극복하기 위해 무엇을 했는지를 읽은 적이 있다.이것이 지금까지 제가 언급해 온 것입니다.

https://www.freecodecamp.org/news/how-to-deploy-a-react-application-to-netlify-363b8a98a985/

https://hugogiraudel.com/2017/05/13/using-create-react-app-on-netlify/

이 사람은 React가 아닌 Vue를 사용했지만, 저는 이 솔루션을 시도해 보았습니다.

https://github.com/vuejs/vuepress/issues/457#issuecomment-390206649

https://github.com/vuejs/vuepress/issues/457#issuecomment-463745656

이것은 간단했고 나에게도 효과가 있었다.이 링크를 찾았습니다https://create-react-app.dev/docs/deployment#netlify

링크에서 된 바와 , 는 " " " " " " " " " " 를 했습니다._redirects/public( 「」등)/public/_redirects 붙였습니다./* /index.html 200_redirects파일입니다. 이 모든 것을 VS 코드로 실행한 후 github으로 푸시하고 github으로 푸시할 때마다 netlify가 자동으로 다시 전개됩니다.문제는 해결되었고 리프레쉬 놀러가 404 오류를 표시합니다.

내 소포 안에.json, 빌드 섹션은 다음과 같습니다.

"scripts": {
   "start": "react-scripts start",
   "build": "react-scripts build",
   "test": "react-scripts test",
   "eject": "react-scripts eject"
}

주의: 일부 기사에서는 추가가 필요하다고 합니다._redirects buildgithub를 합니다._redirects로로 합니다.public공용 폴더는 내 코드에 따라 푸시할 수 있기 때문에 더 잘 작동했습니다.

netlify.toml파일의 파일을 프로젝트의 루트 디렉토리에 붙여 넣습니다.

[[redirects]]
  from = "/*"
  to = "/"
  status = 200

앱을 푸시하고 다시 배포하면 끝입니다.

하다._redirects에서 ""를 합니다."netlify.toml자세한 내용은 git repo의 루트를 참조해 주세요.빌드 스크립트에서도 삭제&& cp build/index.html build/404.html - 더 이상 필요 없어

비슷한 문제가 있어서 공용 폴더에 _redirects 파일을 만들고 다음 코드를 넣었습니다.

/* /index.html 200

빌드 파일을 다시 빌드하고 빌드 실행 후 동일한 문제로 리소스에서 작업했습니다.

Expo 관리 워크플로우를 사용하여 React Native Web에서 이 문제가 발생한 경우 이 솔루션을 통해 문제가 해결되었습니다.

프로젝트의 루트 디렉터리에 netlify.toml을 만듭니다.
netlify.toml 파일에 다음 코드를 추가합니다.

    [[redirects]]
    from = "/*"
    to = "/index.html"
    status = 200

'실행하다'를 실행해 보세요.netlify deploy명령어를 입력합니다.

netlify에서도 하였습니다.나에게 그것은 일련의 변화였다..(/sandbox/appfolder)호스트 샌드박스에서 사용할 수 있습니다(아래 파라미터를 변경하는 것으로 되돌릴 수 있으면 좋겠습니다).할 수 에서 영감을 과 같이 .netlify 。나만의 호스팅 샌드박스를 사용할 때는 _redirects가 없고 홈페이지는 하위 폴더를 가리키고 있습니다.

.편집해야 .RewriteRule ^ /sandbox/myapp/index.html [L].json에서 to to to to to to to."homepage": "/sandbox/myapp"

/syslog에 있습니다.json:

"homepage": "/",

/public/.htaccess에서

RewriteEngine On
RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI} -f [OR]
RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI} -d
RewriteRule ^ - [L]

# Fallback all other routes to index.html    
RewriteRule ^ /index.html [L]

주요 컴포넌트 src/App.js:

<BrowserRouter basename = {process.env.PUBLIC_URL}>

public/index.displaces에 있습니다.

<base href="%PUBLIC_URL%/">

마지막으로 /public/_discloss에서 언급했듯이

/* /index.html 200

2022 업데이트:

_redirects 파일 추가가 안 되면.(리액트 JS)

저에게 해결책은 리액트 프로젝트의 베이스 디렉토리에 netlify.toml 파일을 작성하는 것이었습니다.그리고 팔로잉을 추가합니다.

[[redirects]] from = "/*" to = "/" status = 200

저는 다음 해결 방법을 연구했습니다.먼저 공용 폴더에 _redirects(확장자 없음, 순수 텍스트만)라는 이름의 파일을 만들고 -> 라고 입력합니다./* /index.html 200그 안에. 그리고 네 소포 안에.json 파일이 속성 맨 위에 설정됨{ homepage: "YOUR PUBLIC URL", ...rest of the properties }index.disc 파일 추가<head>...<base href="YOUR PUBLIC URL">...</head>hrishikesh라는 블로그 투고에서 답을 얻었습니다.

이것은 내 _redirects 파일로 /public 폴더에 내 index.html 파일과 함께 있습니다.

~에 참가하고 있습니다.

/* /index.timeout 200

그 후 Netlify에서 사이트를 다시 전개합니다.

감사합니다!

enter code here하면 문제가 됩니다.

import { HashRouter as Router, Switch, Route } from 'react-router-dom'
//instead of 
import { BrowserRouter as Router, Switch, Route } from 'react-router-dom'

루트 디렉토리에 _sys를 만듭니다.예를 들어 /home / syslog-and-condition 등 _syslogs 파일 내의 앱루트를 언급합니다.

바로 그겁니다.

이거 먹어봐

이전에 같은 문제에 직면했지만 백엔드 서버에 접속하기 위해 사용하고 있는 프록시 때문이라는 것을 알게 되었습니다.백엔드 앱이 이 URL example.com에 있다고 가정해 보겠습니다.패키지 내의 프록시 필드로 언급하는 대신json, 나는 당신의 기능에만 링크를 넣을 것을 제안합니다.

이것을 피하다

{
  "name": "frontend",
  "version": "0.1.0",
  "proxy": "https://example.com",
  "private": true,
....
....
}

redux를 사용하여 백엔드 URL을 액티어나 fetch 액션에 입력합니다.(또한 package-lock.json 파일을 삭제하고 Github에 없는 코드를 푸시한 후 Netifly에 연결하고 사이트를 다시 전개합니다.)

코드 예(notice api 호출)

export const listArticles = () => async (dispatch, getState) => {
    try {
        dispatch({
            type: ARTICLES_LIST_REQUEST
        })

        // api call
        const { data } = await axios.get("https://example.com/api/articles/")

        dispatch({
            type: ARTICLES_LIST_SUCCESS,
            payload: data
        })

    } catch (error) {
        dispatch({
            type: ARTICLES_LIST_FAIL,
            payload: error.response && error.response.data.detail ? error.response.data.detail : error.message
        })
    }
}

제 소포요.json 파일

{
  "name": "frontend",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^5.11.10",
    "@testing-library/react": "^11.2.6",
    "@testing-library/user-event": "^12.8.3",
    "axios": "^0.21.1",
    "mdbreact": "^5.0.2",
    "react": "^17.0.2",
    "react-bootstrap": "^1.5.2",
    "react-dom": "^17.0.2",
    "react-redux": "^7.2.3",
    "react-router-bootstrap": "^0.25.0",
    "react-router-dom": "^5.2.0",
    "react-scripts": "4.0.3",
    "redux": "^4.0.5",
    "redux-devtools-extension": "^2.13.9",
    "redux-thunk": "^2.3.0",
    "web-vitals": "^1.1.1"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

저 같은 경우에는_redirects파일이 정상적으로 동작하지 않았습니다.다시 CI 설정을 사용하여 build 명령어로 작성했습니다.CI = npm run build 후 .build그리고 나서 재배치를 개시했고, 내 사이트는 마침내 작동했어!

는 ★★★★★★★★★★★★★★★★★★★★★를 시험해 보았다._redirects 및 「」를 참조해 주세요.netlify.toml404는 되지 않았습니다. '오빠'를 하는 것이었어요.Build Settingsnetlify.comPublish Directory로로 합니다../build결했습습니니다

스택에서 몇 가지 제 .index.html및 「」의도 실시합니다.homepage 집에서는package.json(가 있을 를 대비해서) (혹시라도) (비슷한 문제가 있는 경우)

netlify에서의 전개에 관한 create-react-app 매뉴얼에서는 이러한 문제를 피하기 위해 _redirect 파일을 추가합니다.

클라이언트 측 라우팅 지원:

pushState 창당하다public/redirects일음

/* /index.html 200

이 Create React App을 합니다.public폴더 내용을 빌드 출력에 넣습니다.

레퍼런스: https://create-react-app.dev/docs/deployment/#netlify

index.js에서 HashRouter로 컴포넌트를 랩하기만 하면 됩니다.react-router-dom 에서 HashRouter 를 Import 하는 것을 잊지 말아 주세요.

마법같다.

언급URL : https://stackoverflow.com/questions/58065603/netlify-renders-404-on-page-refresh-using-react-and-react-router

저작자표시

'programing' 카테고리의 다른 글

Jersey 2.0은 POJOMapping Feature와 동등 (0)	2023.03.15
nginx 서버에서 404를 나타내는 react.display 응용 프로그램 (0)	2023.03.15
내 각도 구성JS 어플리케이션 (0)	2023.03.15
MongoDB 다대다 어소시에이션 (0)	2023.03.15
MongoDB에서 컬렉션을 날짜별로 정렬하려면 어떻게 해야 합니까? (0)	2023.03.15

현재글Netlify는 페이지 갱신 시 404를 렌더링합니다(React 및 React 라우터 사용).

댓글

각종 프로그래밍 정보를 다루는 블로그입니다.

Vuex, spring3, c#, C++, Spring, jquery, C, javascript, vuejs2, java,

Today :
Yesterday :

티스토리툴바