IT技术 - React Router BrowserRouter 在不通过主页点击的情况下直接进入子页面时导致“404 Not Found - nginx”错误 - 吾爱随笔录

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

IT技术 javascript reactjs nginx react-router linkedin-api

2021-04-01 08:09:11

我正在使用 React Router 为多页网站进行路由。当尝试直接转到子页面https://test0809.herokuapp.com/signin 时，您会收到“404 Not Found -nginx”错误（为了能够看到此问题，您可能需要转到此链接隐身模式，所以没有缓存）。如果您从主页转到，所有链接都可以正常工作：test0809.herokuapp.com/。我正在使用 BrowserRouter 并且能够通过将 BrowserRouter 更改为 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 存储库：/debelopumento/test0809

5个回答

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

疯狂/相关的旁注，如果您使用它envsubst并忘记转义$标志，您会收到一个错误说明[emerg] invalid number of arguments in "try_files" directive. 在这种情况下不要忘记逃避美元，你很高兴。我花了 30 分钟才发现我的使用问题。

2021-06-13 08:09:11

只需简单地添加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;
}

两步解决方案（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"
 }
}

第二步，添加这个 Heroku buildpack：https : //github.com/heroku/heroku-buildpack-static.git

如果我使用的是 cloud Foundry 而不是 heroku 怎么办？另外，这是假设您的根目录中有 index.html 吗？我在 root/public/index.html 中有我的顶级 index.html，但它不包含任何路由信息。我的路由由 root/src/app/routeConfig.js 中的 react-router-dom 处理

2021-06-13 08:09:11

你可以看到我的项目：https : //github.com/hongnguyenhuu96/honnh96 你应该把你的 create-react-app 文件夹中的所有代码放到 react-ui 文件夹中，其他的保持不变。在部署到 heroku 之后，记得将部署环境配置到 nodejs。它会起作用，祝你好运！它还部署在 heroku 上：http : //hongnh.herokuapp.com/

其它你可能感兴趣的问题

上一篇如何在 React/Jsx 中调用渲染中的函数下一篇在 DOM 中多次使用 React.render() 可以吗？