I am encountering a redirect issue with react-router-dom in the production environment. This is the website I developed: link. If you click on one of the questions, the app redirects to the link of that question. But if you paste the link of a question in the address bar and hit enter, for example when you click on this. A 404 error happens. This issue does not happen in the localhost
I did some research, and it seems like the react-router-dom is not working on the production environment. The codes for the router are like the following:
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
<Router>
<Route exact path='/' component={Home} />
<Route exact path='/about' component={About} />
<Route exact path='/contact' component={Contact} />
<Route exact path='/help' component={Help} />
<Switch>
<Route exact path="/login" component={Login} />
<Route exact path="/register" component={Register} />
<Route exact path="/users" component={Users} />
<Route exact path="/users/:user_id" component={Profile} />
<Route exact path="/tags" component={TagsPage} />
<PrivateRoute exact path="/questions/ask" component={CreateQuestion} />
<Route exact path="/questions/:question_id" component={QuestionsPage} />
</Switch>
</Router>
On the express server, I am redirecting all requests to the post-built index.html
file:
if (process.env.NODE_ENV === 'production') {
app.use(express.static('client/build'));
app.get('*', (req, res) => {
res.sendFile(path.resolve(__dirname, 'client', 'build', 'index.html'));
})
}
But for some reason, it still does not work. What am I doing wrong here?