0

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>
Muhammad Ali
  • 3,478
  • 5
  • 19
  • 30

2 Answers2

3

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

Hardik Modha
  • 12,098
  • 3
  • 36
  • 40
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).

Bhojendra Rauniyar
  • 83,432
  • 35
  • 168
  • 231
  • 1
    That's what I was using but it kept giving me warnings while I was debugging and a lot of people said HashRouter is old and shouldn't be used. – Muhammad Ali Aug 30 '18 at 05:26
  • @MuhammadAli is your website static? Then, you must use HashRouter, otherwise it will not work. https://stackoverflow.com/questions/36289683/what-is-the-difference-between-hashhistory-and-browserhistory-in-react-router – Bhojendra Rauniyar Aug 30 '18 at 05:36