What should I do if the page cannot be found when react refreshes?

Solution to the page not found when React refreshes: 1. Find and open the "app.jsx" file; 2. When defining the routing protocol in "app.jsx", pass "class App extends Component {render () {return (e1c0a17a2781361d11c936c2de98a588a7f2cf15f06fbef780c6b2609731da81dc6dce4a544fdca2df29d5ac0ea9906be1190a8b4b0f1bd4c5e33451c93d253a117a224c00ca84aef0d015e294d20efe16b28748ea4df4d9c2150843fecfba68..." Just define the code.

The operating environment of this tutorial: Windows 10 system, react18.0.0 version, Dell G3 computer.

How to refresh the page and not find it? What to do?

After react is deployed, an error message will be reported when refreshing the page. View cannot be found

After deploying the project this morning, you can click on the route to jump, but An error was reported when the corresponding route was refreshed.

Failed to lookup view "error" in views directory

The project can be used normally when it is local, but why does it report an error when it is refreshed after being deployed to the server? The corresponding view cannot be found?

First I checked the configuration file of node. Because after npm run build of the react project, I put the built file in the public file of node. In this way, after starting the backend node bin/www, node You can read the files in public. Then start to view the app.js file of node. The files are all configured

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里面的静态文件

If there are no errors in the backend, start to view the files in the frontend

Since The routing path was wrong. I searched for routing-related information and found the answer. It was because I was using

BrowserRouter

Cause of error:

There is a difference between client-side routing and server-side routing. You can jump from the homepage to other routing addresses in the browser because it is rendered by the front-end itself. You have defined the corresponding route and script in React Router. The webpage is not refreshed to access the background, but JS dynamically changes the location.

When you refresh, you first access the background address, then the React code is loaded in the returned page, and finally executed in the browser; In other words, if 404 is reported at this time, it is because your background does not return HTML content for this route, and it is not possible to execute React Router.

Use HashRouter, do not use BrowserRouter, so that all requests The page index.html will be positioned, and no configuration is required on the server side.

Solution:

When defining the routing protocol in app.jsx, you can define it as follows:

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;

Recommended study: " react video tutorial》

The above is the detailed content of What should I do if the page cannot be found when react refreshes?. For more information, please follow other related articles on the PHP Chinese website!