How to fix component display overlap - reactjs

Question

I am aiming to display the component "SignIn" when I select the sign in button in the landing page. However, the component in the landing page is still displayed after selecting the button. Here are some images illustrating this problem.
Before Click: enter image description here
After Click: enter image description here
The issue is the second image. What could be the biggest cause of it?
Input is greatly appreciated.
Code - Home Page (LandingPage):
import React from 'react';
import Button from 'react-bootstrap/Button';
import Form from 'react-bootstrap/Form';
import { Link } from 'react-router-dom';
import * as ROUTES from '../../routes.jsx';
import './LandingPage.css'
export default class LandingPage extends React.Component {
render() {
return(
<div>
<Button className="signInButton" variant="light"><Link to={ROUTES.SIGN_IN}>Sign In</Link></Button>
<h1 className="landingBanner" >Streamosphere</h1>
<SignUpFormBase/>
</div>
);
}
}
const INITIAL_STATE = {
email: '',
password: '',
error: null,
};
export default class SignUpFormBase extends React.Component {
constructor(props) {
super(props);
this.state = { ...INITIAL_STATE };
}
onSubmit = event => {
console.log("Props");
console.log(this.props);
const { history } = this.props;
const { email, password } = this.state;
this.props.firebase
.doCreateUserWithEmailAndPassword(email, password)
.then(authUser => {
this.setState({ ...INITIAL_STATE });
})
.catch(error => {
this.setState({ error });
});
event.preventDefault();
};
onChange = event => {
this.setState({ [event.target.name]: event.target.value });
};
render() {
const {
email,
password,
error,
} = this.state;
const isInvalid = password === '' || email === '';
return (
<Form className="signUpForm"
onSubmit={this.onSubmit}>
<h1 className="signUpBanner">Sign Up </h1>
<Form.Group controlId="formSignUpEmail">
<Form.Label>Email address</Form.Label>
<Form.Control name="email"
value={email}
onChange={this.onChange}
type="email"
placeholder="Enter email" />
<Form.Text className="text-muted">
We'll never share your email with anyone else.
</Form.Text>
</Form.Group>
<Form.Group controlId="formSignUpPassword">
<Form.Label>Password</Form.Label>
<Form.Control name="password"
value={password}
onChange={this.onChange}
type="password"
placeholder="Password" />
</Form.Group>
<Button type="submit"
disabled={isInvalid}
className="signUpButton"
variant="light" >
Sign Up
</Button>
{error && <p>{error.message}</p>}
</Form>
);
}
}
const SignUpLink = () => (
<p>
Already have an account? <Link to={ROUTES.SIGN_IN}>Sign In</Link>
</p>
);
Sign In (file w/ SignIn Component):
import React, { Component } from 'react';
import SignUpLink from './LandingPage.jsx'
import * as ROUTES from '../../routes.jsx';
import Form from 'react-bootstrap/Form';
import Button from 'react-bootstrap/Button';
import './LandingPage.css'
export default class SignInPage extends Component {
render() {
return(
<div>
<h1 className="landingBanner" >Streamosphere</h1>
<SignInFormBase/>
<SignUpLink />
</div>
);
}
}
const INITIAL_STATE = {
email: '',
password: '',
error: null,
};
export default class SignInFormBase extends Component {
constructor(props) {
super(props);
this.state = { ...INITIAL_STATE };
}
onSubmit = event => {
const { email, password } = this.state;
this.props.firebase
.doSignInWithEmailAndPassword(email, password)
.then(() => {
this.setState({ ...INITIAL_STATE });
this.props.history.push(ROUTES.HOME);
})
.catch(error => {
this.setState({ error });
});
event.preventDefault();
};
onChange = event => {
this.setState({ [event.target.name]: event.target.value });
};
render() {
const { email, password, error } = this.state;
const isInvalid = password === '' || email === '';
return (
<Form className="signUpForm"
onSubmit={this.onSubmit}>
<h1 className="signUpBanner"> Sign In </h1>
<Form.Group controlId="formSignInEmail">
<Form.Label>Email address</Form.Label>
<Form.Control name="email"
value={email}
onChange={this.onChange}
type="email"
placeholder="Enter email" />
<Form.Text className="text-muted">
We'll never share your email with anyone else.
</Form.Text>
</Form.Group>
<Form.Group controlId="formSignInPassword">
<Form.Label>Password</Form.Label>
<Form.Control name="password"
value={password}
onChange={this.onChange}
type="password"
placeholder="Password" />
</Form.Group>
<Button type="submit"
disabled={isInvalid}
className="signUpButton"
variant="light" >
Sign In
</Button>
{error && <p>{error.message}</p>}
</Form>
);
}
}
URL Routes (routes.jsx):
export const LANDING = '/';
export const SIGN_IN = '/signin';
export const HOME = '/home';
export const ACCOUNT = '/account';
App.jsx (entry point, where LandingPage is the 1st page rendered):
import { Route } from 'react-router'
import React from 'react';
import LandingPage from './components/containers/LandingPage'
import SignInPage from './components/containers/SignIn'
import HomePage from './components/containers/HomePage'
import * as ROUTES from './routes.jsx';
class App extends React.Component {
render() {
return (
<div>
<Route exact path={ROUTES.LANDING} component={LandingPage} />
<Route path={ROUTES.HOME} component={HomePage} />
<Route path={ROUTES.SIGN_IN} component={SignInPage} />
</div>
);
}
}
export default App;

Answer 1

It is because of the Link from react-router-dom.
You could circumvent it by reloading the whole page.
For example, use <a href="/sign-in></a> instead.

Answer 2

You need to wrap all routes in App with Switch which would render only one matching child component.
// App.jsx
import { Route, Switch } from 'react-router'
import React from 'react';
import LandingPage from './components/containers/LandingPage'
import SignInPage from './components/containers/SignIn'
import HomePage from './components/containers/HomePage'
import * as ROUTES from './routes.jsx';
class App extends React.Component {
render() {
return (
<Switch>
<Route exact path={ROUTES.LANDING} component={LandingPage} />
<Route path={ROUTES.HOME} component={HomePage} />
<Route path={ROUTES.SIGN_IN} component={SignInPage} />
</Switch>
);
}
}
export default App;