CODEWITHSUNDEEP
javascriptreactjsgoogle-cloud-platformreact-router-v4
Muhammad Ali
Muhammad Ali

Reputation: 3536

React router doesn't work after deploying

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>

Upvotes: 0

Views: 4594

Answers (2)

Hardik Modha
Hardik Modha

Reputation: 12746

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

Upvotes: 3

Bhojendra Rauniyar
Bhojendra Rauniyar

Reputation: 85583

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).

Upvotes: 2

Related Questions