React App 404刷新网页后出错

Question

我的react应用程序在浏览器中加载时运行良好，但当我尝试刷新页面时，它会给我404错误。下面是我的App.js代码。我是React的新手，所以任何提示都会有所帮助。

import Layout from './components/Layout'
import {Routes, Route} from 'react-router-dom'
import Home from './components/Home';
import About from './components/About';
import Contact from './components/Contact';
import Work from './components/Work';
import Projects from './components/Projects';
function App() {
return (
<Routes>
<Route path="/" element={<Layout />}>
<Route index element={<Home />} />
<Route index path="/about" element={<About />} />
<Route index path="/contact" element={<Contact />} />
<Route index path="/work" element={<Work />} />
<Route index path="/projects" element={<Projects />} />
</Route>
</Routes>
);
}
export default App;```

Answer 1

首先，我注意到您的react app.js结构不正确，很抱歉，如果要从您的主页链接页面，请不要对其进行索引。而你的家路径直接链接到布局而不是家，你可以解释为什么。这是我删除布局后所做的更改。

布局应该用作所有页面的通用组件，而不是一个独立的页面。

import {Routes, Route} from 'react-router-dom'
import Home from './components/Home';
import About from './components/About';
import Contact from './components/Contact';
import Work from './components/Work';
import Projects from './components/Projects';
function App() {
return (
<Routes>
<Route  path="/" element={<Home />} />
<Route  path="/about" element={<About />} />
<Route  path="/contact" element={<Contact />} />
<Route  path="/work" element={<Work />} />
<Route  path="/projects" element={<Projects />} />
</Routes>
);
}
export default App;