Currently I have developed a site with react js and I have used react-router-dom for the routes, when I run the command npm run build to get the project ready for production I find several inconsistencies when I try to leave the site running in a subdirectory using xampp, the inconsistencies are as follows
- When I put a path in the browser that is different from the root path the browser, for example
localhost:8085/pruebaDev/viewusers/it returns the following:
Object not located! The requested URL could not be located on this server. If you have entered the URL manually, please check your spelling and try again.
- When I put only initial path of the subdirectory it loads without any problem, example
localhost:8085/pruebaDev/
The configurations that I have made are the following
.htaccess configuration
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /pruebaDev/
RewriteRule ^index\.html$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteCond %{REQUEST_FILENAME} !-l
RewriteRule . /index.html [L]
</IfModule>
package.json File
"homepage": ".",
"name": "pruebaDev",
"version": "0.1.0",
"private": true,
"dependencies": {
"@testing-library/jest-dom": "^4.2.4",
"@testing-library/react": "^9.5.0",
"@testing-library/user-event": "^7.2.1",
"moment": "^2.29.1",
"react": "^16.14.0",
"react-dom": "^16.14.0",
"react-redux": "^7.2.1",
"react-router-dom": "^5.2.0",
"react-scripts": "3.4.3",
"redux": "^4.0.5",
"sweetalert2": "^10.9.0"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": "react-app"
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}
}
Configuration file of the routes App.js
<Router basename={'/pruebaDev/'}>
...
</Router>
