Upon clicking the button, the URL changes but the content remains the same. Interestingly, if I use an <a> tag instead of a <Link> tag, the page loads and the content updates as well. However, when using the <Link> tag, the data does not load even though the URL value is updated. Can you please provide a solution for this issue?
App.js
import "./App.css";
import "../node_modules/bootstrap/dist/css/bootstrap.css";
import Home from "./component/pages/Home";
import Contect from "./component/pages/Contect";
import About from "./component/pages/About";
import Navbar from "./component/layout/Navbar";
import { BrowserRouter as Router, Route, Switch } from "react-router-dom";
import React from "react";
function App() {
return (
<Router>
<Navbar title="title1" />
<Switch>
<Route exact path="/Contect" component={Contect}></Route>
<Route exact path="/" component={Home}></Route>
<Route exact path="/About" component={About}></Route>
</Switch>
</Router>
);
}
export default App;
Navbar.js
import React from "react";
import { Link } from "react-router-dom";
import {} from "react-router-dom";
const Navbar = (props) => {
return (
<nav class="navbar navbar-expand-lg navbar-light bg-dark">
<div className="container">
<Link class="navbar-brand bg-light" to="/contect">
{props.title}
</Link>
<button
class="navbar-toggler"
type="button"
data-bs-toggle="collapse"
data-bs-target="#navbarSupportedContent"
aria-controls="navbarSupportedContent"
aria-expanded="false"
aria-label="Toggle navigation"
>
<span class="navbar-toggler-icon "></span>
</button>
<div class="collapse navbar-collapse">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<Link class="nav-link bg-light" to="/">
Home
</Link>
</li>
<li class="nav-item active">
<Link class="nav-link bg-light" to="/About">
About
</Link>
</li>
</ul>
</div>
</div>
</nav>
);
};
export default Navbar;
Home.js
import React from "react";
const Home = () => {
return (
<>
<div className="container">
<div className="py-4">
<h1> Home page </h1>
</div>
</div>
</>
);
};
export default Home;
About.js and Contect.js are similar to Home.js