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错误，这会给我的所有网址带来＃符号。除了在你的网址中有＃的所有问题，最大的问题是我需要在我的网站中实现LinkedIn Auth，而LinkedIn OAuth 2.0不允许重定向网址包含＃。
LinedIn OAuth 2.0错误屏幕抓取

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?

背景：我用create-react-app启动了这个项目。 GitHub回购： / debelopumento / test0809

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

推荐答案

两步解决方案（步骤在React-Router README https：// github中提到了1。 com / mars / create-react-app-buildpack＃routing-clean-urls ）：

two step solution (step 1 is mentioned in React-Router README https://github.com/mars/create-react-app-buildpack#routing-clean-urls):

步骤1，将static.json文件添加到根目录：

Step 1, add a static.json file to the root:

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

步骤2，添加此Heroku buildpack： https://github.com/heroku/heroku-buildpack-static.git

Step 2, add this Heroku buildpack: https://github.com/heroku/heroku-buildpack-static.git

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