Estoy usando React Router para el enrutamiento de un sitio web de varias páginas. Al intentar ir a una subpágina directamente https://test0809.herokuapp.com/signin , obtendría un error "404 Not Found -nginx" (para poder ver este problema, es posible que deba ir a este enlace en Modo incógnito para que no haya caché). Todos los enlaces funcionan bien si vas desde la página de inicio: test0809.herokuapp.com/ . Estaba usando BrowserRouter y pude eliminar el error "404 no encontrado" al cambiar BrowserRouter a HashRouter, lo que le da a todas mis direcciones URL un signo "#". Además de todos los problemas de tener un "#" en sus URL, el mayor problema es que necesito implementar LinkedIn Auth en mi sitio web, y LinkedIn OAuth 2.0 no permite que las URL de redireccionamiento contengan #. Captura de pantalla de error de 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¿Alguna sugerencia sobre las soluciones?
Antecedentes: comencé el proyecto con create-react-app. repositorio GitHub: /debelopumento/test0809
El problema es que nginx no sabe qué hacer con /signin . Debe cambiar su configuración de nginx (generalmente en /etc/nginx/conf.d/ ) para servir su index.html independientemente de la ruta. Aquí hay una configuración de nginx de muestra que podría ayudar:
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 (eg /devicesfile.js) location ~ ^.+\..+$ { try_files $uri =404; } # Any route that doesn't have a file extension (eg /devices) location / { try_files $uri $uri/ /index.html; } }Simplemente agregue try_files $uri $uri/ /index.html; a location / bloque en el archivo de configuración NGINX como este:
server { listen 80; server_name localhost; location / { root /build; index index.html; try_files $uri $uri/ /index.html; } }En la ubicación agregar esto
location / { try_files $uri /index.html; }