Reproduction:
npm create vite@latest
choose: react
choose: typescript
cd vite-project
npm install
npm i react-router-dom
App.tsx:
import { Routes, Route, BrowserRouter } from 'react-router-dom';
import './App.css'
import TestA from './pages/TestA'
import TestB from './pages/TestB'
function App() {
return (
<>
<BrowserRouter>
<div style={{ display: 'flex', alignItems: 'center', gap: '10px' }}>
<h3>Nav:</h3>
<a href="/">TestA</a>
<a href="/testb">TestB</a>
</div>
<Routes>
<Route path="/" element={<TestA />} />
<Route path="/testb" element={<TestB />} />
</Routes>
</BrowserRouter>
</>
)
}
export default App
pages/TestA.tsx:
const TestA = () => {
return (
<div>TestA</div>
)
}
export default TestA
pages/TestB.tsx:
const TestB = () => {
return (
<div>TestB</div>
)
}
export default TestB
vite.config.ts:
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
// /config/
export default defineConfig({
plugins: [react()],
})
package.json:
{
"name": "vite-project",
"private": true,
"version": "0.0.0",
"type": "module",
"scripts": {
"dev": "vite",
"build": "tsc -b && vite build",
"lint": "eslint .",
"preview": "vite preview"
},
"dependencies": {
"react": "^18.3.1",
"react-dom": "^18.3.1",
"react-router-dom": "^7.1.4"
},
"devDependencies": {
"@eslint/js": "^9.17.0",
"@types/node": "^22.12.0",
"@types/react": "^18.3.18",
"@types/react-dom": "^18.3.5",
"@vitejs/plugin-react": "^4.3.4",
"eslint": "^9.17.0",
"eslint-plugin-react-hooks": "^5.0.0",
"eslint-plugin-react-refresh": "^0.4.16",
"globals": "^15.14.0",
"typescript": "~5.6.2",
"typescript-eslint": "^8.18.2",
"vite": "^6.0.5"
}
}
index.html:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vite + React + TS</title>
</head>
<body>
<div id="root"></div>
<script type="module" src="/src/main.tsx"></script>
</body>
</html>
Problem:
npm run build
load on the server (or open on local server)
when i try to go through (for example http://127.0.0.1:5500/testb) the address bar or using navigaton I got error:
Cannot GET /testb
I tried: 76115927 75272022 75554837 but it not helped me. This problem is from vite v2 and I don't know how to solve it.
Reproduction:
npm create vite@latest
choose: react
choose: typescript
cd vite-project
npm install
npm i react-router-dom
App.tsx:
import { Routes, Route, BrowserRouter } from 'react-router-dom';
import './App.css'
import TestA from './pages/TestA'
import TestB from './pages/TestB'
function App() {
return (
<>
<BrowserRouter>
<div style={{ display: 'flex', alignItems: 'center', gap: '10px' }}>
<h3>Nav:</h3>
<a href="/">TestA</a>
<a href="/testb">TestB</a>
</div>
<Routes>
<Route path="/" element={<TestA />} />
<Route path="/testb" element={<TestB />} />
</Routes>
</BrowserRouter>
</>
)
}
export default App
pages/TestA.tsx:
const TestA = () => {
return (
<div>TestA</div>
)
}
export default TestA
pages/TestB.tsx:
const TestB = () => {
return (
<div>TestB</div>
)
}
export default TestB
vite.config.ts:
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
// https://vite.dev/config/
export default defineConfig({
plugins: [react()],
})
package.json:
{
"name": "vite-project",
"private": true,
"version": "0.0.0",
"type": "module",
"scripts": {
"dev": "vite",
"build": "tsc -b && vite build",
"lint": "eslint .",
"preview": "vite preview"
},
"dependencies": {
"react": "^18.3.1",
"react-dom": "^18.3.1",
"react-router-dom": "^7.1.4"
},
"devDependencies": {
"@eslint/js": "^9.17.0",
"@types/node": "^22.12.0",
"@types/react": "^18.3.18",
"@types/react-dom": "^18.3.5",
"@vitejs/plugin-react": "^4.3.4",
"eslint": "^9.17.0",
"eslint-plugin-react-hooks": "^5.0.0",
"eslint-plugin-react-refresh": "^0.4.16",
"globals": "^15.14.0",
"typescript": "~5.6.2",
"typescript-eslint": "^8.18.2",
"vite": "^6.0.5"
}
}
index.html:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vite + React + TS</title>
</head>
<body>
<div id="root"></div>
<script type="module" src="/src/main.tsx"></script>
</body>
</html>
Problem:
npm run build
load on the server (or open on local server)
when i try to go through (for example http://127.0.0.1:5500/testb) the address bar or using navigaton I got error:
Cannot GET /testb
I tried: 76115927 75272022 75554837 but it not helped me. This problem is from vite v2 and I don't know how to solve it.
Share Improve this question asked Jan 31 at 9:27 NaN-SimonNaN-Simon 1582 silver badges9 bronze badges 3- to run: serve -s dist – Brave Commented Jan 31 at 17:27
- @Brave I got: ObjectNotFound: (serve:String) [], CommandNotFoundException – NaN-Simon Commented Jan 31 at 19:26
- install serve package first please! – Brave Commented Jan 31 at 20:06
1 Answer
Reset to default -1This problem arises because, upon a page refresh or direct URL access, the server attempts to locate the specified route on the filesystem and returns a 404 error if it's not found. To address this, you need to configure your server to serve the index.html file for all routes, allowing React Router to handle the routing on the client side.
Ensure that the base option in your vite.config.js is set accordingly
// vite.config.js
export default defineConfig({ base: '/testb/', plugins: [react()], });
发布者：admin，转转请注明出处：http://www.yc00.com/questions/1745272012a4619806.html
评论列表（0条）