Component not rendering using react router - reactjs

Question

I'm using React Router with the Link tag to handle the routing between the pages on my app. Well, when I click on the home page from the landing page the URL changes but the DOM does not show any of the code that I have for the home component Also I'm not getting any errors and the home page is just blank. I have included the code for my Index.js and App.js so you can see. Just a side note I'm using react-router-dom V 5.2.0, and react-redux V 7.2.2.
Index.js
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
import { BrowserRouter } from 'react-router-dom';
ReactDOM.render(
<BrowserRouter>
<App />
</BrowserRouter>, document.getElementById('root')
);
reportWebVitals();
App.js
import React from 'react';
import { Route, BrowserRouter, Switch, withRouter} from 'react-router-dom';
//COMPONENTS IMPORTS
import LandingPage from './components/LandingPage';
import HomePage from './components/HomePage';
function App() {
return (
<div>
<BrowserRouter>
<Switch>
<Route exact path= "/" component = {LandingPage} />
<Route exact path = "/HomePage" component ={HomePage} />
</Switch>
</BrowserRouter>
</div>
)
}
export default withRouter (App);
LandingPage
//tools import
import React, { Component } from 'react'
import { Link } from 'react-router-dom';
//css Import
import '../App.css';
//Animation Import
import Anime from 'react-anime';
//Image Imports
import silentCareLogo from '../Images/silentCareLogo.png';
// React-icons//
import {BsArrowRightShort} from "react-icons/bs";
export default class landingPage extends Component {
render() {
return (
<div className="landingContainer">
<div className="logoContainer">
<Anime className = "animeDiv" opacity = {[0,1]} duration={25000}>
<img src={silentCareLogo} className="companyLogo" alt="logo" />
</Anime>
<Anime className="animeHmeBtnDiv" opacity = {[0,1]} duration={20000} delay={2000}>
<Link to="/home" className="landingHomeBtn">home <BsArrowRightShort /> </Link>
</Anime>
</div>
</div>
)
HomePage
import React, { Component } from 'react'
//css Import
import '../App.css';
//Animation Import
import Anime from 'react-anime';
export default class HomePage extends Component {
render() {
return (
<div>
<div className ="homeContainer">
<h1>home page</h1>
</div>
</div>
)
}
}

Answer 1

Please check you app.js You home page component is in /HomePage
and you are trying to get it in /home
function App() {
return (
<div>
<BrowserRouter>
<Switch>
<Route exact path='/' component={LandingPage} />
<Route exact path='/HomePage' component={HomePage} />
</Switch>
</BrowserRouter>
</div>
);
}
And in the Landing page, you are trying to get home page in /home path which does not exist in your app.
<Link to="/home" className="landingHomeBtn">home <BsArrowRightShort /> </Link>
whereas your component is in " /HomePage "
Solution:
change your path in App.js from /HomePage to /home
function App() {
return (
<div>
<BrowserRouter>
<Switch>
<Route exact path='/' component={LandingPage} />
<Route exact path='/home' component={HomePage} />
</Switch>
</BrowserRouter>
</div>
);
}