React Router Url displays blank page after running npm serve - reactjs

Question

I have an issue with running npm serve for a static react SPA. I believe it has to do with the react-router-dom from react-router.
Below is the package json
{
"name": "eureka-customer-ui",
"version": "0.1.0",
"private": true,
"dependencies": {
"#reduxjs/toolkit": "^1.7.1",
"#webstudio/buttons": "^5.3.2",
"#webstudio/checkbox": "^2.1.6",
"#webstudio/icons": "^5.0.4",
"#webstudio/inputs": "^4.11.0",
"#webstudio/theme-dbs": "^2.0.1",
"#webstudio/tooltip": "^2.3.1",
"#webstudio/typography": "^1.0.3",
"axios": "^0.24.0",
"formik": "^2.2.9",
"html-react-parser": "^1.4.5",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-helmet": "^6.1.0",
"react-redux": "^7.2.6",
"react-router-dom": "^6.2.1",
"react-scripts": "4.0.3",
"styled-components": "^5.3.3",
"web-vitals": "^2.1.3",
"yup": "^0.32.11"
},
"scripts": {
"clean": "rm -rf build && rm -rf node_modules",
"lint": "eslint './src/**/*.{js,ts,tsx}' --max-warnings 5",
"start": "react-scripts start ",
"build:clean": "rm -rf build",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject",
"setup": "npm ci",
"preinstall": "npx npm-force-resolutions",
"package": "cd build && zip -r ../$BUILD_ENV.zip *",
"copy:static": "cp Staticfile build",
"serve": "npx serve -s build -l 5000"
},
"eslintConfig": {
"extends": [
"react-app"
],
"rules": {
"import/no-anonymous-default-export": "off"
}
},
"eslintIgnore": [
"src/components/DBSDefault/*.tsx"
],
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
"devDependencies": {
"#testing-library/jest-dom": "^4.2.4",
"#testing-library/react": "^9.5.0",
"#testing-library/user-event": "^13.1.5",
"#types/jest": "^24.9.1",
"#types/node": "^16.11.19",
"#types/react": "^16.9.53",
"#types/react-dom": "^16.9.9",
"#types/react-helmet": "^6.1.5",
"#types/styled-components": "^5.1.19",
"#types/uuid": "^8.3.4",
"#typescript-eslint/eslint-plugin": "^4.17.0",
"#typescript-eslint/parser": "^4.17.0",
"eslint-config-prettier": "^8.1.0",
"eslint-plugin-cypress": "^2.11.2",
"eslint-plugin-jest": "^24.2.1",
"eslint-plugin-prettier": "^3.3.1",
"local-web-server": "^5.1.1",
"serve": "^13.0.2",
"typescript": "^4.4.4",
"ws": "^8.5.0"
}
}
After running npm run build and npm run serve, i am unable to hit a PATH defined in my routes such as localhost:5000/personal/cards/subscription/signup. I get a blank page instead.
Below is a snippet of my routes components
import ConfirmationPage from "pages/ConfirmationPage";
import SignUpForm from "pages/SignUpForm";
import React from "react";
import { BrowserRouter, Route, Routes } from "react-router-dom";
export default () => {
return (
<BrowserRouter>
<Routes>
<Route
path="/personal/cards/subscription/signup"
element={<SignUpForm />}
/>
<Route
path="/personal/cards/subscription/confirm"
element={<ConfirmationPage />}
/>
</Routes>
</BrowserRouter>
);
};
Any ideas? Thank you!

Answer 1

Solved it by replace BrowserRouter with HashRouter.