将重定向置于index.html dhe dy dhe dep.js（React Refresh无法获得问题）

发布于 2025-01-26 23:07:11 字数 2114 浏览 1 评论 0原文

我对反应相对较新，但是面对一个我认为相当普遍的问题。我的应用程序正常工作，但是当我刷新或尝试直接链接到路由时，我会收到“无法 /xxx”错误。

我了解为什么我会遇到此错误，并且在此处阅读了几个线程，以及博客和视频来解决它，但到目前为止，我无法修复它。我一直在尝试一个通向我的index.html的全部修复程序。

在我的服务器index.js上：

app.get('/*', function(req, res) {
    res.sendFile(path.join(__dirname, '../frontend/public/index.html'), function(err) {
        if (err) {
            res.status(500).send(err)
        }
    })
})

部署此功能时，我尝试刷新，我不再收到错误，而是显示了我的空白index.html文件。换句话说，我的app.js没有渲染，我在日志中没有收到任何错误。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <!-- <link rel="icon" href="%PUBLIC_URL%/favicon.ico" /> -->
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="theme-color" content="#000000" />
    <meta
      name="description"
      content="Web site created using create-react-app"
    />
    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />

    <title>React App</title>
  </head>
  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>

  </body>
</html>

我使用的是带有React Router V6的Mern堆栈，当部署到Heroku（而不是Localhost）时，问题发生。有人可以帮助我指向正确的方向吗？预先感谢

编辑：我的前端index.js文件：

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. 
reportWebVitals();

原文

I'm relatively new to React, but facing an issue which I understand to be fairly common; my app works fine, but when I refresh or try to link directly to a route, I receive the "Cannot Get /XXX" error.

I understand why I'm getting this error and I have read several threads here, as well as blogs and videos to resolve it, but have thus far been unable to fix it. I have been attempting a catch-all fix which routes through to my index.html.

on my server index.js:

app.get('/*', function(req, res) {
    res.sendFile(path.join(__dirname, '../frontend/public/index.html'), function(err) {
        if (err) {
            res.status(500).send(err)
        }
    })
})

When deploying this and I try a refresh, I don't get the error anymore but instead I am shown my blank index.html file. In other words, my app.js isn't rendered and I receive no errors in the logs.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <!-- <link rel="icon" href="%PUBLIC_URL%/favicon.ico" /> -->
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="theme-color" content="#000000" />
    <meta
      name="description"
      content="Web site created using create-react-app"
    />
    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />

    <title>React App</title>
  </head>
  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>

  </body>
</html>

I'm using a MERN stack with react router v6, the issue occurs when deployed onto Heroku (but not localhost). Could anybody help to point me in the right direction?
Thanks in advance

Edit:
My frontend index.js file:

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. 
reportWebVitals();

分享到QQ

分享到微博