Un problème 404 se produit lors de l'actualisation de la page dans React-Router

Cet article présente principalement la solution au problème 404 de l'historique du navigateur React-Router qui actualise la page. Il est d'une grande valeur pratique. Les amis dans le besoin peuvent s'y référer

Lorsqu'ils utilisent React pour développer de nouveaux projets, lorsque je rencontre directement la page d'actualisation. Lors de l'accès à la route secondaire ou tertiaire, l'accès échoue et une exception 404 ou de chargement de ressources se produit. Cet article analyse ce problème et résume la solution.

Contexte

Lorsque vous utilisez webpack-dev-server comme serveur de développement local, il vous suffit normalement d'utiliser simplement la commande webpack-dev-server pour démarrer, mais lorsque le projet Dans les deux situations suivantes, des routes imbriquées et des routes de chargement asynchrones sont souvent nécessaires :

1. Nous utilisons une bibliothèque de routage comme React-Router pour créer un routage d'application sur une seule page

2. Utilisez le plug-in html-webpack-plugin pour injecter dynamiquement la balise 3f1c4e4b6b16bbbd69b2ee476dc4f83a du js chargé dans le document html

At cette fois, accéder à localhost:9090 est normal. Chargement de pages et js et autres fichiers, mais lorsque nous devons accéder au routage de deuxième ou même de troisième niveau ou actualiser la page, comme localhost:9090/posts/92, ​​​​deux situations peuvent se produire :

1. Le chargement de la page a échoué et Cannot Get (404) a été renvoyé

2. Le service a répondu, mais le fichier html ; La sortie du traitement Webpack n'a pas été renvoyée, ce qui a entraîné l'impossibilité de charger les ressources js. Le deuxième cas est le suivant Image :

Alors, comment allons-nous. gérer l'accès et le routage normaux de chaque page ? Le blogueur a retracé la source et résolu le problème après avoir recherché la configuration du document. Cet article est un résumé de l'ensemble du processus de résolution du problème.

Analyser le problème

Après avoir découvert le problème, nous commencerons à analyser et à résoudre le problème. Nous jugeons que ce problème est généralement causé par deux raisons :

configuration frontale du routeur React ;
configuration du service webpack-dev-server

react-router

Parce que le routage frontal est plus facile à identifier les problèmes, plus pratique pour l'analyse et plus familier avec React-Router, j'ai donc d'abord vérifié les informations de configuration pertinentes du React -bibliothèque de routage du routeur et j'ai constaté qu'elle était mentionnée dans le document. Lors de l'utilisation de BrowserHistory, une véritable URL sera créée et il n'y aura aucun problème dans la gestion de la requête initiale. Cependant, après le saut d'itinéraire, lors de l'actualisation de la page ou directement. en accédant à l'URL, vous constaterez qu'elle ne peut pas répondre correctement. Pour plus d'informations, veuillez consulter le document de référence, qui est également fourni dans le document. Plusieurs solutions de configuration du serveur ont été proposées :

Node

<.>

Lorsque vous utilisez Node as a service, vous devez utiliser le caractère générique * pour écouter toutes les requêtes et renvoyer le document html cible (html qui fait référence à la ressource js).

const express = require('express')
const path = require('path')
const port = process.env.PORT || 8080
const app = express()

// 通常用于加载静态资源
app.use(express.static(__dirname + '/public'))

// 在你应用 JavaScript 文件中包含了一个 script 标签
// 的 index.html 中处理任何一个 route
app.get('*', function (request, response){
 response.sendFile(path.resolve(__dirname, 'public', 'index.html'))
})

app.listen(port)
console.log("server started on port " + port)

Nginx

Si vous utilisez le serveur nginx, il vous suffit d'utiliser la directive try_files :

Apache

server {
 ...
 location / {
  try_files $uri /index.html
 }
}

Si vous utilisez le serveur Apache, vous devez créer un fichier .htaccess dans le répertoire racine du projet. Le fichier contient le contenu suivant :

Voici les configurations pour le. Malheureusement, nous ne les avons pas encore. Pour présenter le serveur concerné, nous avons simplement utilisé le service intégré de webpack-dev-server, mais nous avons trouvé le problème, c'est-à-dire que la requête de routage ne peut pas correspondre au HTML renvoyé. document, il est donc temps de trouver la solution dans le document webpack-dev-server .

RewriteBase /
RewriteRule ^index\.html$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.html [L]

webpack-dev-server

Je dois me plaindre du document officiel webpack-dev-server Le blogueur l'a lu plusieurs fois avant de voir clairement le problème. Il y a deux situations ici :

Le output.publicPath n'est pas modifié, c'est-à-dire qu'il n'y a aucune valeur déclarée dans le fichier de configuration du webpack, ce qui est la situation par défaut

1. Définissez output.publicPath sur une valeur personnalisée

2. Cliquez ici pour afficher le document

Condition par défaut

Condition par défaut, sans modifier la valeur output.publicPath, il vous suffit de définir la configuration historyApiFallback de webpack-dev-server :

Si vous utilisez l'API d'historique HTML5, vous devez servir votre index.html à la place des réponses 404, ce qui peut être fait en définissant historyApiFallback : true

Si votre application utilise l'API d'historique HTML5, vous devrez peut-être utiliser index.html pour répondre à 404 ou demandes de problèmes, définissez simplement g historyApiFallback: true

devServer: {
 historyApiFallback: true
}

Valeur personnalisée

Cependant, si vous avez modifié output.publicPath dans la configuration de votre Webpack, vous devez spécifier l'URL à rediriger vers. Cela se fait à l'aide de l'option historyApiFallback .indexSi vous modifiez la valeur output.publicPath dans le fichier de configuration du webpack, vous devez alors déclarer la redirection de la requête et configurer la valeur historyApiFallback.index.

Proxy

// output.publicPath: '/assets/'
historyApiFallback: {
 index: '/assets/'
}

J'ai découvert que l'utilisation de la méthode ci-dessus ne pouvait pas résoudre complètement mon problème. Il y aurait toujours des exceptions de réponse aux demandes de routage, alors le blogueur a continué. rechercher de meilleures solutions. Solution : Cliquez ici pour voir le document

Le proxy peut éventuellement être contourné en fonction du retour d'une fonction. La fonction peut inspecter la requête HTTP, la réponse et. toutes les options de proxy données. Il doit renvoyer soit false, soit un chemin d'URL qui sera servi au lieu de continuer à proxyer la demande.

代理提供通过函数返回值响应请求方式，针对不同请求进行不同处理，函数参数接收HTTP请求和响应体，以及代理配置对象，这个函数必须返回false或URL路径，以表明如何继续处理请求，返回URL时，源请求将被代理到该URL路径请求。

proxy: {
 '/': {
  target: 'https://api.example.com',
  secure: false,
  bypass: function(req, res, proxyOptions) {
   if (req.headers.accept.indexOf('html') !== -1) {
    console.log('Skipping proxy for browser request.');
    return '/index.html';
   }
  }
 }
}

如上配置，可以监听https://api.example.com域下的/开头的请求（等效于所有请求），然后判断请求头中accept字段是否包含html，若包含，则代理请求至/index.html，随后将返回index.html文档至浏览器。

解决问题

综合以上方案，因为在webpack配置中修改了output.publicPath为/assets/，所以博主采用webpack-dev-server Proxy代理方式解决了问题：

const PUBLICPATH = '/assets/'
...
proxy: {
 '/': {
  bypass: function (req, res, proxyOptions) {
   console.log('Skipping proxy for browser request.')
   return `${PUBLICPATH}/index.html`
  }
 }
}

监听所有前端路由，然后直接返回${PUBLICPATH}/index.html，PUBLICPATH就是设置的output.publicPath值。

另外，博主总是习惯性的声明，虽然不设置该属性也能满足预期访问效果：

historyApiFallback: true

上面是我整理给大家的，希望今后会对大家有帮助。

相关文章：

在JS中实现点击下拉菜单内容同步输入框

实现输入框与下拉框联动

使用parcel.js打包出错的问题

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!