My react app runs perfectly on localhost but when I deploy it and go to /contact or /pricing or any other component it give a 404 error. I don't understand what I'm missing. Please guide me if you know how can I fix it. Please visit www.rndmatch.com and go to candidates or any navitem and reload the page to see the error message. Also attaching the image of error message. You can see the error message here
This is what I've tried so far .htaccsess file
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /rndmatch/
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteCond %{REQUEST_FILENAME} !-l
RewriteRule . /myreactapp/index.html [L]
</IfModule>
package.jason file
"name": "rndmatch",
"homepage": "https://www.rndmatch.com/",
"version": "0.1.0",
"private": true,
"dependencies": {
"@coreui/react": "^4.4.0",
"@fontsource/red-hat-text": "^4.5.10",
"@testing-library/jest-dom": "^5.16.5",
"@testing-library/react": "^13.4.0",
"@testing-library/user-event": "^13.5.0",
"bootstrap": "^5.2.1",
"jquery": "^3.6.1",
"jquery-nice-select": "^1.1.0",
"react": "^18.2.0",
"react-bootstrap": "^2.5.0",
"react-burger-menu": "^3.0.8",
"react-dom": "^18.2.0",
"react-icons": "^4.4.0",
"react-optimized-image": "^0.4.1",
"react-progressive-graceful-image": "^0.6.14",
"react-router-dom": "^6.3.0",
"react-scripts": "5.0.1",
"react-select": "^5.4.0",
"react-slick": "^0.29.0",
"slick-carousel": "^1.8.1",
"styled-components": "^5.3.5",
"web-vitals": "^2.1.4"
},
App.js file
<Router basename={'/'}>
<ScrollToTop>
<Routes>
<Route
path={`${process.env.PUBLIC_URL}/`}
element={
<>
<Navbar
class= "Navbar-light"
color='#fff'
Scolor= "#fff"
/>
<Sidebar />
<Hero />
<Cards />
<Video />
<Recruiting />
<Job />
<Footer />
</>
}
/>
<Route
path={`${process.env.PUBLIC_URL}/login`}
element={
<>
<Navbar
class= "Navbar-light"
color='#fff'
Scolor='#fff'
/>
<Sidebar />
<Login />
<Footer />
</>
}
/>
</Routes>
</ScrollToTop>
</Router>
Also updated all the links like this
<Link to={`${process.env.PUBLIC_URL}/candidate_step1`}>
Candidate
</Link>