React Router BrowserRouter 在不通过主页点击直接进入子页面时会导致“404 Not Found - nginx”错误

我正在使用 React Router 为多页面网站进行路由。当尝试直接进入子页面时https://test0809.herokuapp.com/signin https://test0809.herokuapp.com/signin您会收到“404 Not Found -nginx”错误（为了能够看到此问题，您可能需要以隐身模式访问此链接，这样就没有缓存）。如果您从主页访问，所有链接都可以正常工作：test0809.herokuapp.com/。我使用的是 BrowserRouter，并且通过将 BrowserRouter 更改为 HashRouter 能够消除“404 未找到”错误，这为我的所有网址提供了“#”符号。除了网址中包含“#”的所有问题之外，最大的问题是我需要在我的网站中实现 LinkedIn Auth，而 LinkedIn OAuth 2.0 不允许重定向 URL 包含 #。LinkedIn OAuth 2.0 错误屏幕抓取 https://i.stack.imgur.com/epVHg.png

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

问题是 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;
  }
}