IT이야기

홈 페이지 클릭 없이 하위 페이지로 직접 이동할 때 라우터 브라우저 반응으로 인해 "404 Not Found - nginx" 오류가 발생함

cyworld 2022. 3. 20. 12:44
반응형

홈 페이지 클릭 없이 하위 페이지로 직접 이동할 때 라우터 브라우저 반응으로 인해 "404 Not Found - nginx" 오류가 발생함

나는 멀티 페이지 웹사이트의 라우팅을 위해 리액션 라우터를 사용하고 있다.Https://test0809.herokuapp.com/signin하위 페이지로 직접 이동하려고 하면"404-nginx 발견되지 않아"오류가 표시됨(이 문제를 보려면 인코그니토 모드에서 이 링크로 이동해야 캐시가 없을 수 있음).홈 페이지에서 이동하면 모든 링크가 정상적으로 작동함:test0809.herokuapp.com/. BrowserRouter를 사용 중이었는데 브라우저Router를 HashRouter로 변경하여 "404 not found" 오류를 제거할 수 있었는데, 이 오류는 내 모든 URL에 "#" 기호를 부여한다.URL에 "#"이 있을 때의 모든 문제 외에도, 가장 큰 문제는 웹 사이트에서 LinkedIn Auth를 구현해야 한다는 것이며, LinkedIn OAuth 2.0은 리디렉션 URL에 #를 포함하도록 허용하지 않는다는 것이다.LinedIn OAuth 2.0 오류 화면 붙잡기

import React, { Component } from 'react'
import { BrowserRouter as Router, Route, Link } from 'react-router-dom'
import LinkedIn from 'react-linkedin-login'
const Home = () => <div><h2>Home</h2></div>
const About = () => <div><h2>About</h2></div>
class Signin extends Component {
  callbackLinkedIn = code => {
    console.log(1, code)
  }
  render() {
      return (
          <div>
              <h2>Signin</h2>
              <LinkedIn
                  clientId="clientID"
                  callback={this.callbackLinkedIn}
              >
          </div>
      )
  }
}
const BasicExample = () =>
  <Router>
    <div>
      <ul>
         <li>
           <Link to="/">Home</Link>
         </li>
         <li>
           <Link to="/about">About</Link>
         </li>
         <li>
           <Link to="/signin">Signin</Link>
         </li>
      </ul>
  <hr />

      <Route exact path="/" component={Home} />
      <Route path="/about" component={About} />
      <Route path="/signin" component={Signin} />
    </div>
  </Router>
export default BasicExample

해결책에 대한 제안이 있으십니까?

배경:나는 그 프로젝트를 create-react-app으로 시작했다.GitHub repo:/debelopumento/test0809

문제는 nginx가 어떻게 해야 할지 모른다는 것이다./signin. nginx 구성을 변경해야 함(일반적으로 다음 위치에서)/etc/nginx/conf.d/)를 위해index.html노선에 관계없이다음은 도움이 될 수 있는 샘플 nginx 구성:

server {
  listen 80 default_server;
  server_name /var/www/example.com;

  root /var/www/example.com;
  index index.html index.htm;      

  location ~* \.(?:manifest|appcache|html?|xml|json)$ {
    expires -1;
    # access_log logs/static.log; # I don't usually include a static log
  }

  location ~* \.(?:css|js)$ {
    try_files $uri =404;
    expires 1y;
    access_log off;
    add_header Cache-Control "public";
  }

  # Any route containing a file extension (e.g. /devicesfile.js)
  location ~ ^.+\..+$ {
    try_files $uri =404;
  }

  # Any route that doesn't have a file extension (e.g. /devices)
  location / {
    try_files $uri $uri/ /index.html;
  }
}

간단히 덧붙인다.try_files $uri $uri/ /index.html;location /다음과 같은 NGINX 구성 파일 차단:

server {
   listen       80;
   server_name  localhost;

   location / {
       root   /build;
       index  index.html;
       try_files $uri $uri/ /index.html;
   }
}

위치에서 이 항목을 추가

location / {
try_files $uri /index.html;
}

2단계 솔루션(1단계는 React-Router README https://github.com/mars/create-react-app-buildpack#routing-clean-urls)에 설명됨:

1단계, 루트에 static.json 파일을 추가하십시오.

{
 "root": "build/",
 "clean_urls": false,
 "routes": {
   "/**": "index.html"
 }
}

2단계, Heroku 빌드팩 추가: https://github.com/heroku/heroku-buildpack-static.git

내 프로젝트를 볼 수 있다: https://github.com/hongnguyenhuu96/honnh96에서 모든 코드를 create-create-app 폴더에 넣어 actui 폴더를 유지하고 다른 코드를 변경하지 않도록 해야 한다.Heroku에 대한 딜로이가 끝나면 nodej에 대한 배포를 구성하는 것을 잊지 마십시오.잘 될 거야, 행운을 빌어!또한 http://hongnh.herokuapp.com/에서 Heroku에 배치했다.

참조URL: https://stackoverflow.com/questions/45598779/react-router-browserrouter-leads-to-404-not-found-nginx-error-when-going-to

반응형