React 새로고침 시 페이지를 찾을 수 없으면 어떻게 해야 하나요?

React 새로 고침 시 페이지를 찾을 수 없는 해결 방법: 1. "app.jsx" 파일을 찾아서 엽니다. 2. "app.jsx"에서 라우팅 프로토콜을 정의할 때 "class App Extensions Component( ) {return (e1c0a17a2781361d11c936c2de98a588a7f2cf15f06fbef780c6b2609731da81dc6dce4a544fdca2df29d5ac0ea9906be1190a8b4b0f1bd4c5e33451c93d253a117a224c00ca84aef0d015e294d20efe16b28748ea4df4d9c2150843fecfba68..." 코드 정의로 충분합니다.

이 튜토리얼의 운영 환경: Windows 10 시스템, React 버전 18.0.0, Dell G3 컴퓨터

React를 새로 고칠 때 페이지를 찾을 수 없으면 어떻게 해야 하나요? 배포된 경우 페이지를 새로고침하면 뷰를 찾을 수 없습니다

오늘 아침에 프로젝트를 배포한 후 경로를 클릭하면 점프할 수 있는데 해당 경로를 새로고침하면 오류가 보고됩니다

Failed to lookup view "error" in views directory

프로젝트에서 서버에 배포하면 정상적으로 사용 가능합니다. 서버에 배포한 후 왜 새로 고치나요? 오류. 해당 뷰를 찾을 수 없나요?

빌드된 파일을 노드의 공용 파일에 넣었기 때문에 먼저 노드 구성 파일을 확인하세요. npm 이후 반응 프로젝트를 실행합니다. bin/www 이후 노드는 공개적으로 파일을 읽을 수 있습니다. 그런 다음 노드의 app.js 파일을 확인하기 시작합니다. 파일이 모두 구성되었습니다.

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

백엔드에 오류가 없으면 시작합니다. 프론트엔드의 파일을 확인하려고

라우팅이니까 경로가 틀렸다면 라우팅 관련 정보를 검색해서 답을 찾았습니다.

BrowserRouter

오류 원인:

클라이언트 측 라우팅과 서버 측 라우팅에는 차이점이 있습니다. 홈페이지에서 다른 라우팅 주소로 이동할 수 있습니다. 이는 React Router에서 해당 경로를 정의하기 때문입니다. 새로 고칠 때 먼저 백엔드 주소에 액세스한 다음 반환된 페이지에 React 코드를 로드하고 마지막으로 브라우저에서 실행합니다. 즉, 이때 404가 보고되면 백엔드가 이 경로에 대해 HTML을 반환하지 않기 때문입니다.

모든 요청이 전달되도록 BrowserRouter 대신 HashRouter를 실행할 필요가 없습니다. index.html 페이지로 이동하며 서버 측에서는 구성이 필요하지 않습니다.

해결책:

app.jsx에서 라우팅 프로토콜을 정의할 때 다음과 같이 정의할 수 있습니다.

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;

권장 학습: "

리액트 영상 튜토리얼

"

위 내용은 React 새로고침 시 페이지를 찾을 수 없으면 어떻게 해야 하나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!