javascript - vite react page not found (Cannot GET mypage) after assembling the build and redirect on page using address bar - S

admin2025-04-17 2

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-Simon 1582 silver badges9 bronze badges

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

Add a comment |

1 Answer 1

Sorted by: Reset to default -1

This 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()], });

转载请注明原文地址:http://anycun.com/QandA/1744871587a88805.html