web-dev-qa-db-ja.com

React Router BrowserRouterは、ホームページをクリックせずに直接サブページに移動すると、「404 Not Found-nginx」エラーにつながる

ReactマルチページWebサイトのルーティングにルーターを使用しています。サブページに直接アクセスしようとすると、 https://test0809.herokuapp.com/signin 「404 Not Found -nginx」エラーが表示されます（この問題を確認するには、シークレットモードでこのリンクにアクセスして、キャッシュがないようにする必要があります）。ホームページからアクセスすると、すべてのリンクが正常に機能します：test0809.herokuapp.com/。 BrowserRouterを使用していて、BrowserRouterをHashRouterに変更することで「404 not found」エラーを解消できました。これにより、すべてのURLに「＃」記号が付けられます。あなたのURLに「＃」を含むことに関するすべての問題に加えて、それに関する最大の問題は、私のウェブサイトにLinkedIn認証を実装する必要があることであり、LinkedIn OAuth 2.0は含む＃。 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

javascriptreactjsnginxreact-routerlinkedin-api
14
Di Ye

2ステップのソリューション（ステップ1は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"
 }
}

ステップ2、次のHerokuビルドパックを追加します。 https://github.com/heroku/heroku-buildpack-static.git

0
Di Ye

問題は、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;
  }
}
32
Mark Rabey

次のように、NGINX設定ファイルのtry_files $uri $uri/ /index.html;ブロックにlocation /ブロックを追加するだけです。

server {
   listen       80;
   server_name  localhost;

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