홈 페이지 클릭 없이 하위 페이지로 직접 이동할 때 라우터 브라우저 반응으로 인해 "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에 배치했다.
'IT이야기' 카테고리의 다른 글
vue의 형식 지정 - 속성 'validate'가 'Vue | 요소 | 부[] | 요소[]'에 존재하지 않음 (0) | 2022.03.20 |
---|---|
Difference between the created and mounted events in Vue.js (0) | 2022.03.20 |
.vue 단일 파일 구성 요소를 NWj와 함께 사용할 수 없음 (0) | 2022.03.19 |
외부 URL에 대한 각도 매트 버튼 링크 (0) | 2022.03.19 |
리액트-라우터 V6 "url 변경은 있지만 구성 요소가 렌더링하지 않음" (0) | 2022.03.19 |