Route Param not working with React after deploying react application to apache server

Question

I have created React app and using react-router in my application. I have used router param in Route. Whenever I try to access in local it is working fine, but when I deployed to apache server route params link is not working. Please help me.

My React Router Code:

 <BrowserRouter basename="tryloka_stg_app"> <Switch> <Route exact path="/" component={Home} /> <Route exact path="/partner" component={Partner} /> <Route exact path="/signup" component={SignUp} /> <Route exact path="/signupOTP" component={SignUpOTP} /> <Route exact path="/signupBirthday" component={SignupBirthday} /> <Route exact path="/confirmPassword/:id" component={ConfirmPassword} /> <Route component={NotFound} /> </Switch> </BrowserRouter>

Whenever i try to access http://35.181.69.171/tryloka_stg_app/confirmPassword/14 in production it shows a blank page with no error. But when I access in localhost like localhost:3000/tryloka_stg_app/confirmPassword/14 it is working fine. Build file location in server is /var/www/html/tryloka_stg_app

My .htaccess file:

 Options -MultiViews RewriteEngine On RewriteCond %{REQUEST_FILENAME}.-f RewriteRule ^ /tryloka_stg_app/index,html [QSA,L]

My package.json file:

 { "name": "tryloka", "homepage": ".", "version": "0.1.0", "private": true, "dependencies": { "@date-io/date-fns": "^2.10.8", "@fortawesome/fontawesome-free": "^5.15.2", "@fortawesome/react-fontawesome": "^0.1.14", "@material-ui/pickers": "^3.3.10", "@syncfusion/ej2-react-calendars": "^18.4.48", "@testing-library/jest-dom": "^5.11.5", "@testing-library/react": "^11.1.2", "@testing-library/user-event": "^12.2.2", }, "scripts": { "start": "react-scripts start", "build": "react-scripts build", "test": "react-scripts test", "eject": "react-scripts eject" }, "eslintConfig": { "extends": [ "react-app", "react-app/jest" ] }, "browserslist": { "production": [ ">0.2%", "not dead", "not op_mini all" ], "development": [ "last 1 chrome version", "last 1 firefox version", "last 1 safari version" ] } }

Answer 1

Deploy a react app to subdirectory

Add basename to route which you have already done

Make changes in the homepage of package.json accordingly

"homepage": "http://35.181.69.171/tryloka_stg_app",