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

ee7vknir 于 5个月前发布在 Nginx

关注(0)|答案(6)|浏览(60)

我正在使用React Router为多页面网站进行路由。当尝试直接https://test0809.herokuapp.com/signin转到子页面时，您会得到“404 Not Found -nginx”错误（为了能够看到这个问题，你可能需要去这个链接在隐身模式，所以没有缓存）.所有的链接工作正常，如果你从主页：test0809.herokuapp.com/.我使用的是BrowserRouter，通过将BrowserRouter更改为HashRouter，可以消除“404未找到”错误，这会给我所有的URL一个“#”符号。除了在URL中有“#”的所有问题之外，最大的问题是，我需要在我的网站中实现LinkedIn Auth，而LinkedIn OAuth 2.0不允许重定向URL包含#. LinedIn OAuth 2.0 error screen grab

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

字符串
有什么变通的建议吗？
背景：我开始了这个项目，使用的是React-app。GitHub repo：/debelopumento/test0809

nginx

来源：https://stackoverflow.com/questions/45598779/react-router-browserrouter-leads-to-404-not-found-nginx-error-when-going-to

6条答案

按热度按时间

nxowjjhe1#

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

字符串

赞(0）回复(0）举报 5个月前

ff29svar2#

只需简单地将try_files $uri $uri/ /index.html;添加到NGINX配置文件中的location /块中，如下所示：

server {
   listen       80;
   server_name  localhost;

   location / {
       root   /build;
       index  index.html;
       try_files $uri $uri/ /index.html;
   }
}

字符串

赞(0）回复(0）举报 5个月前

iqih9akk3#

在位置上添加此

location / {
try_files $uri /index.html;
}

字符串

赞(0）回复(0）举报 5个月前

rjzwgtxy4#

两步解决方案（步骤1在React-Router README中提到https：//github.com/mars/react-app-buildpack#routing-clean-urls）：
第一步，在根目录下添加一个static.json文件：

{
 "root": "build/",
 "clean_urls": false,
 "routes": {
   "/**": "index.html"
 }
}

字符串
第2步，添加Heroku构建包：https://github.com/heroku/heroku-buildpack-static.git

赞(0）回复(0）举报 5个月前

piok6c0g5#

如果你使用Docker镜像：
1.在项目中添加文件nginx.conf：

server {
    location / {
        root /usr/share/nginx/html;
        try_files $uri /index.html;
    }
}

字符串
1.然后复制镜像中的配置：

FROM nginx

COPY . /usr/share/nginx/html
COPY nginx.conf /etc/nginx/conf.d/react.conf

EXPOSE 80

CMD ["nginx", "-g", "daemon off;"]

型

赞(0）回复(0）举报 5个月前

c2e8gylq6#

你可以看到我的项目：https://github.com/hongnguyenhuu96/honnh96在这里你应该把所有的代码在你的react-react-app文件夹到react-ui文件夹，并保持其他不变.之后，deloy到heroku，记得配置部署设备到nodejs.它会工作，祝你好运！它也部署在heroku在：http://hongnh.herokuapp.com/

赞(0）回复(0）举报 5个月前

我来回答

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

6条答案

相关问题

热门标签

最新问答