React router doesn't work after deploying

Question

I deployed a react-app on Google Cloud Platform: https://just-palace-214904.appspot.com/

However only the first page shows up and the hyperlinks don't work. They worked fine when I was running the app on localhost. Below is my setup:

index.js:

 import React from 'react'; import ReactDOM from 'react-dom'; import {BrowserRouter, Route, Switch} from 'react-router-dom' import SignIn from './components/SignIn'; import SignUp from './components/SignUp'; import ForgotPass from './components/ForgotPass'; ReactDOM.render((<BrowserRouter> <Switch> <Route exact={true} path="/" component={SignIn}/> <Route path="/signup" component={SignUp}/> <Route path="/forgot" component={ForgotPass}/> </Switch> </BrowserRouter>), document.getElementById('root')); 

My hyperlinks:

 <a href="/forgot">Forgot password?</a><br/> <a href="/signup">Create account</a> 

Answer 1

You should be using Link instead of anchor tags.

Change

 <a href="/forgot">Forgot password?</a><br/>
 <a href="/signup">Create account</a>

to

<Link to="/forgot">Forgot Password?</Link><br/>
<Link to="/signup">Create account</Link>

The Link is from react-router-dom package.

Here is the working example. https://codesandbox.io/s/qz4l7nzv09

Answer 2

I don't know why, the similar issue I have faced earlier and using HashRouter worked fine rather than using BrowserRouter :

import { HashRouter } from 'react-router-dom'

---

Ah, I found a blog explaining differences between them here .

The BrowserRouter should be used when you have a server that will handle dynamic requests (knows how to respond to any possible URI), while the HashRouter should be used for static websites (where the server can only respond to requests for files that it knows about).