React Router BrowserRouter 导致“404 Not Found - nginx"不通过主页点击直接进入子页面时出错 [英] React Router BrowserRouter leads to "404 Not Found - nginx " error when going to subpage directly without through a home-page click

问题描述

我正在使用 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'从 'react-linkedin-login' 导入 LinkedInconst Home = () =><div><h2>首页</h2></div>const 关于 = () =><div><h2>关于</h2></div>类登录扩展组件{callbackLinkedIn = 代码 =>{console.log(1, 代码)}使成为() {返回 (<div><h2>登录</h2><领英客户端 ID =客户端 ID"回调={this.callbackLinkedIn}>

)}}const BasicExample = () =><路由器><div><ul><li><链接到="/">主页</链接><li><Link to="/about">关于</Link><li><Link to="/signin">登录</Link><小时/><路由精确路径="/" component={Home}/><Route path="/about" component={About}/><Route path="/signin" component={Signin}/>

</路由器>导出默认 BasicExample

对解决方法有什么建议吗?

背景:我用 create-react-app 开始了这个项目.GitHub 存储库:/debelopumento/test0809

解决方案

问题是 nginx 不知道如何处理 /signin.无论路由如何，您都需要更改 nginx 配置(通常在 /etc/nginx/conf.d/ 中)以提供 index.html 服务.这是一个可能有帮助的示例 nginx 配置:

服务器{听 80 default_server;server_name/var/www/example.com;根/var/www/example.com;index index.html index.htm;位置 ~* .(?:manifest|appcache|html?|xml|json)$ {过期 -1;# access_log 日志/static.log;# 我通常不包含静态日志}位置 ~* .(?:css|js)$ {try_files $uri =404;过期 1 年；access_log off;add_header 缓存控制公共"；}# 任何包含文件扩展名的路由(例如/devicesfile.js)位置 ~ ^.+..+$ {try_files $uri =404;}# 任何没有文件扩展名的路由(例如/devices)地点/{try_files $uri $uri//index.html;}}

I am using React Router for routing for a multi-page website. When trying to go to a sub page directly https://test0809.herokuapp.com/signin you'd get a "404 Not Found -nginx" error (To be able to see this problem you might need to go to this link in Incognito mode so there's no cache). All the links work fine if you go from the home page: test0809.herokuapp.com/. I was using BrowserRouter and was able to eliminate the "404 not found" error by changing BrowserRouter to HashRouter, which gives all my urls a "#" sign. Besides all the problems with having a "#" in your urls, the biggest issue with it is that I need to implement LinkedIn Auth in my website, and LinkedIn OAuth 2.0 does not allow redirect URLs to contain #. 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

Any suggestions on the workarounds?

Background: I started the project with create-react-app. GitHub repo: /debelopumento/test0809

解决方案

The problem is that nginx doesn't know what to do with /signin. You need to change your nginx config (usually in /etc/nginx/conf.d/) to serve your index.html regardless of the route. Here is a sample nginx config that might help:

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;
  }
}

这篇关于React Router BrowserRouter 导致“404 Not Found - nginx"不通过主页点击直接进入子页面时出错的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！