CODEWITHSUNDEEP
javascriptroutesfrontendvite
NaN-Simon
NaN-Simon

Reputation: 148

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

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.

Upvotes: 1

Views: 44

Answers (1)

RiDz XD
RiDz XD

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

Upvotes: -1

Related Questions