react v6 routing - 刷新（F5）页面返回404页面未找到

Question

我遇到的问题涉及基本的反应应用程序（v6）。 更具体地说，它与路由有关。 我已经在 stackoverflow 上完成了几个问题/答案，但无法弄清楚出了什么问题。

这就是我正在使用的。

应用程序.js

import "./App.css";
import React from "react";
import { BrowserRouter, Routes, Route } from "react-router-dom";
import NavBar from "./components/NavBar";
import Home from "./pages/Home";
import About from "./pages/About";
import PrivacyPolicy from "./pages/PrivacyPolicy";
import TermsOfService from "./pages/TermsOfService";

const App = () => {

  return (
    <BrowserRouter>         
      <NavBar/>        
      <Routes>
        <Route path="/" element = {<Home/>} />
        <Route path="/home" element={<Home />} />
        <Route path="/about" element={<About />} />
        <Route path="/privacyPolicy" element={<PrivacyPolicy />} />
        <Route path="/termsOfService" element={<TermsOfService />} />
      </Routes>
    </BrowserRouter>
  );
}

export default App;

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
  
ReactDOM.render(
    <App />,
  document.getElementById('root')
);

索引.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <link rel="icon" href="./favicon.ico" /> <!-- Used to be "%PUBLIC_URL%/favicon.ico" >> might be required when live -->
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="theme-color" content="#000000" />
    <meta name="description" content="Genesis platform for financial education." />
    <meta name="keywords" content="Genesis" class="next-head" />
    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
    <title>Genesis</title>
  </head>
  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root">
    </div>
  </body>
</html>

这是在浏览器 window 中按下 F5（刷新）按钮时的错误消息。

NavBar 中的按钮可以很好地导航到不同的页面，但是刷新让我挂了......从我所做的研究中，我觉得解决方案在这些文件中的某个地方，但我就是不知道是什么改变。

Answer 1

在 SPA 中，您需要将所有流量发送到 index.html。 您可以通过在根文件夹中添加_redirects文件并添加以下内容来做到这一点：

/*    /index.html   200

在服务器中，它为所有请求提供 index.html，React 处理浏览器中的路由。

如果您为此使用了 CRA，请将_redirects文件放在公用文件夹中。

react v6 routing - 刷新（F5）页面返回404页面未找到

问题描述

1 个解决方案

解决方案1
2 已采纳 2022-09-05 19:09:05

react v6 routing - 刷新（F5）页面返回404页面未找到

问题描述

1 个解决方案

解决方案1 2 已采纳 2022-09-05 19:09:05

解决方案1
2 已采纳 2022-09-05 19:09:05