Que dois-je faire si la page est introuvable lors de l'actualisation de React ?

Solution à la page introuvable lors de l'actualisation de React : 1. Recherchez et ouvrez le fichier "app.jsx" ; 2. Lors de la définition du protocole de routage dans "app.jsx", passez "class App extends Component {render( ) {return (

..." La définition du code suffit.

L'environnement d'exploitation de ce tutoriel : système Windows 10, React version 18.0.0, ordinateur Dell G3

Que dois-je faire si la page est introuvable lors de l'actualisation du React ? est déployé, la vue ne sera pas trouvée lors du rafraîchissement de la page

Après avoir déployé le projet ce matin, vous pouvez cliquer sur l'itinéraire pour sauter, mais lorsque l'itinéraire correspondant est rafraîchi, une erreur est signalée

Failed to lookup view "error" in views directory

Le projet peut être utilisé normalement lorsqu'il est déployé sur le serveur. Pourquoi le rafraîchir après l'avoir déployé sur le serveur ? Erreur Vous ne trouvez pas la vue correspondante

Vérifiez d'abord le fichier de configuration du nœud car j'ai mis le fichier construit dans le fichier public du nœud. après npm, exécutez le projet React. Après bin/www, le nœud peut lire les fichiers en public. Ensuite, commencez à vérifier le fichier app.js du nœud. Les fichiers sont tous configurés

app.set('views', path.join(__dirname, 'views'));
app.engine('.html',require('ejs').__express);
// app.set('view engine', 'jade');
app.set('view engine', 'html');
app.use(logger('dev'));
app.use(express.json());
app.use(express.urlencoded({ extended: false }));
app.use(cookieParser());
app.use(express.static(path.join(__dirname, 'public'))); //这句话就是express会读取public里面的静态文件

S'il n'y a pas d'erreur dans le backend, démarrez. pour vérifier les fichiers du frontend

Puisqu'il s'agit de routage. Si le chemin était erroné, j'ai recherché des informations relatives au routage et j'ai trouvé la réponse. C'était parce que j'utilisais

BrowserRouter

Cause de l'erreur :

. Il existe une différence entre le routage côté client et le routage côté serveur. Vous pouvez passer de la page d'accueil à d'autres adresses de routage car elles sont rendues par le front-end. Vous définissez la route correspondante dans React Router. page web pour accéder à l'arrière-plan. C'est JS qui change dynamiquement l'emplacement. Lors de l'actualisation, vous accédez d'abord à l'adresse du backend, puis chargez le code React dans la page renvoyée, et enfin l'exécutez dans le navigateur ; , si 404 est signalé à ce moment-là, c'est parce que votre backend ne renvoie pas de HTML pour cette route, il n'est pas nécessaire d'exécuter React Router

Utilisez HashRouter au lieu de BrowserRouter, afin que toutes les requêtes soient dirigées vers le. index.html, et aucune configuration n'est requise côté serveur

Solution :

Lors de la définition du protocole de routage dans app.jsx, vous pouvez le définir comme suit :

import React, { Component} from 'react';
 import { HashRouter  as Router  } from "react-router-dom";
 import Nav from './component/Menu/Menu';
 import FootContent from './component/Footer/Footer';
 import MinContent from './component/content/mainContent';
 import {Layout} from 'antd';
   class App extends Component {
     render() {
       return (
        <Layout className="layout">
        <Router>
        <div>
        <Nav  />
        <MinContent />
        </div>
      </Router>
      <FootContent />
      </Layout>
       );
     }
   }
 
   export default App;

Apprentissage recommandé : "

react video. tutoriel

"

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!