React Router v4 URL问题

Question

我们的react应用程序可以完美地在开发模式（本地主机）下运行，但是当我们将其放入heroku服务器时，我们无法直接访问路由。当我们执行history.push（{}）到我们的路径时，我们得到一个404页面。

您可以在此处查看页面：placemate.herokuapp.com

重现步骤：转至上面的URL，看到它加载。然后将/ login添加到URL栏，您将看到一个404页面。但是，单击标题中的登录名将正确引导您。

这是我们的路由器代码：

import React from 'react'
import { Switch, Route, Redirect } from 'react-router-dom'
import '../../App.css'
import Home from '../../scenes/general/home/Home'
import Login from '../../scenes/general/login/Login'
import Register from '../../scenes/general/register/Register'
import GuestHeader from '../../components/general/header/Header'

const Main = () => (
  <main className='main_app'>
      <GuestHeader />
      <Switch>
          <Route exact path='/' component={Home}/>
          <Route path='/login' component={Login}/>
          <Route path='/register' component={Register}/>
      </Switch>
    </main>
);

export default Main;

index.js文件：

ReactDOM.render(<BrowserRouter><App /></BrowserRouter>, document.getElementById('root'));
registerServiceWorker();

Answer 1

为什么找不到404

这是因为，当您在地址栏中放置任何路径时，其请求都将发送到Web服务器，而不会响应。如您所知，react router我们使用的是负责根据路由显示正确组件的方法，但是由于您将路由传递给nginx/ apache服务器，因此不会对路由器做出反应；因此，您的Web服务器会尝试查找www.example.com/login实际上不存在的服务器 。因此，您得到404未找到。

解

尝试.htaccess在您的Web服务器公共html根目录上创建一个文件。创建一些规则，以便始终从根路径转发请求。这将使反应变得生动起来，因此反应路由器可以抓住路径并提供适当的组件。

例如，您可以创建类似这样的内容

对于Apache服务器

RewriteEngine On        
  # If an existing asset or directory is requested go to it as it is
  RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI} -f [OR]
  RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI} -d
  #RewriteCond %{SERVER_PORT} 80 
  #RewriteRule ^(.*)$ https://www.example.com/$1 [R,L]
  RewriteRule ^ - [L]

  # If the requested resource doesn't exist the serve index.html
  RewriteRule ^ ./index.html

对于Node.js

node.js express服务器的示例代码可以是这样的（存在于服务器实现文件中，通常称为server.js）

const express = require('express');
const path = require('path');

const app = express();

if(process.env.NODE_ENV!== 'production'){
   //do something if you are in development environment

   //below lines only if you are using webpack based deployment

   const webpackMiddleware = require('webpack-dev-middleware');
   const webpack = require('webpack');
   const webpackConfig = require('./webpack.config.js');
   app.use(webpackMiddleware(webpack(webpackConfig)));
}
else{
  // in production env do following thing 
  app.use(express.static('public_html_folder'));//give user access to public assets

  //redirect all request to index.html for compatibality with react router
  app.get('*',(req,res)=>{
    res.sendFile(path.join(__dirname,'public_html_folder/index.html'));
  });
}

app.listen(process.env.PORT || 3050, () => console.log('Listening'));

我希望这可以解决您的问题，或者至少可以让您了解如果有不同的后端服务器该怎么办。