我正在使用React Router进行多页网站的路由。尝试直接转到子页面https://test0809.herokuapp.com/signin时,您将收到“ 404 Not Found -nginx”错误(要看到此问题,您可能需要转到此链接隐身模式,因此没有缓存)。如果您从首页进入,所有链接都可以正常工作test0809.herokuapp.com/。我使用的是BrowserRouter,并且能够通过将BrowserRouter更改为HashRouter来消除“ 404 not found”错误,该错误使我所有的网址都带有“#”符号。除了网址中带有“#”的所有问题外,最大的问题是我需要在我的网站中实现LinkedIn Auth,并且LinkedIn OAuth 2.0不允许重定向URL包含#。 LinedIn OAuth 2.0错误屏幕抓取
test0809.herokuapp.com/
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仓库:/debelopumento/test0809
/debelopumento/test0809
问题是nginx不知道该怎么做/signin。您需要更改nginx配置(通常在中/etc/nginx/conf.d/)以为您提供服务,index.html而不管路由如何。这是一个示例nginx配置,可能会有所帮助:
/signin
/etc/nginx/conf.d/
index.html
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; } }