React Router BrowserRouter приводит к ошибке "404 Not Found - nginx" при переходе на подстраницу непосредственно без щелчка на домашней странице

Я использую React Router для маршрутизации для многостраничного веб-сайта. При попытке перейти на подстраницу напрямую https://test0809.herokuapp.com/signin вы получите ошибку" 404 Not Found-nginx " (чтобы увидеть эту проблему, вам может потребоваться перейти по этой ссылке в режиме инкогнито, чтобы не было кэша). Все ссылки работают нормально, если вы идете на главной странице: test0809.herokuapp.com/. Я использовал BrowserRouter и смог устранить ошибку "404 не найден", изменив BrowserRouter на HashRouter, что дает всем моим URL-адресам знак"#". Помимо всех проблем с наличием " # " в ваших URL-адресах, самая большая проблема заключается в том, что мне нужно реализовать аутентификацию LinkedIn на моем веб-сайте, а 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 repo:/debelopumento/test0809

7
javascript linkedin-api nginx react-router reactjs

3 ответов

проблема в том, что 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;
  }
}
17

двухэтапное решение (Шаг 1 упоминается в React-Router README https://github.com/mars/create-react-app-buildpack#routing-clean-urls):

Шаг 1, добавьте статический.JSON-файл в корень:

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

Шаг 2, Добавьте этот Heroku buildpack:https://github.com/heroku/heroku-buildpack-static.git

1

вы можете увидеть мой проект: https://github.com/hongnguyenhuu96/honnh96 где вы должны поместить все коды в папку create-react-app для папки react-ui и сохранить другие unchange. После этого deloy к heroku, не забудьте настроить развертывание evironment на nodejs. Это будет работать, удачи! Он также развернуты на Heroku на: http://hongnh.herokuapp.com/

0