0

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?

gshow8 shac
  • 391
  • 2
  • 15

0 Answers0