分类导航

程序问答发布时间：2022-06-02 发布网站：大佬教程 code.js-code.com

大佬教程收集整理的这篇文章主要介绍了当直接进入子页面而不通过主页单击时，React Router Browser Browser会导致“ 404 Not Found-nginx”错误，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。

如何解决当直接进入子页面而不通过主页单击时，React Router Browser Browser会导致“ 404 Not Found-nginx”错误？

开发过程中遇到当直接进入子页面而不通过主页单击时，React Router Browser Browser会导致“ 404 Not Found-nginx”错误的问题如何解决？下面主要结合日常开发的经验，给出你关于当直接进入子页面而不通过主页单击时，React Router Browser Browser会导致“ 404 Not Found-nginx”错误的解决方法建议，希望对你解决当直接进入子页面而不通过主页单击时，React Router Browser Browser会导致“ 404 Not Found-nginx”错误有所启发或帮助；

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

解决方法

我正在使用React
Router进行多页网站的路由。尝试直接转到子页面https://test0809.herokuapp.com/signin时，您将收到“
404 Not Found
-nginx”错误（要看到此问题，您可能需要转到此链接隐身模式，因此没有缓存）。如果您从首页进入，所有链接都可以正常工作test0809.herokuapp.com/。我使用的是BrowserRouter，并且能够通过将BrowserRouter更改为HashRouter来消除“
404 not found”错误，该错误使我所有的网址都带有“＃”符号。除了网址中带有“＃”的所有问题外，最大的问题是我需要在我的网站中实现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