React-Router not rendering pages

Question

i got a navbar template from bootstrap and tried to configure react-router, the url changes but the pages aren't rendering not sure what if it has to do with my navbar or the router

import React from "react";
import "./App.css";
import "bootstrap/dist/css/bootstrap.css";

import { BrowserRouter as Router, Switch, Route, Link } from "react-router-dom";
import Home from "./pages/home";
import Aboutus from "./pages/Aboutus";
import Services from "./pages/services";
import PrivacyPolicy from "./pages/PrivacyPolicy";

function App() {
  return (
    <Router>
      <nav className="navbar navbar-expand-lg navbar-light bg-light">
        <Link className="nav-link" to="../pages/home.jsx">
          Graphic-Lab
        </Link>
          </ul>
      </nav>

      <Switch>
        <Route exact path="./pages/home.jsx">
          <Home />
        </Route>
        <Route path="./pages/Aboutus.jsx">
          <Aboutus />
        </Route>
      </Switch>
    </Router>
  );
}
export default App;

Answer 1

Attribute path of Route expects browser URL to match. Not path of file you want to display.

So it has to be something like this:

<Route path="/something">
    <MyCoolComponent/>
</Route>

It renders MyCoolComponent for URL like https://example.com/something .

You can read path definition and see some example at the documentation .

Answer 2

There don't need to use file extensions, because you make an SAP, the file extensions need when you render different HTML pages on different routes, but in React you just imitate the pages with JS. Just use path="/home" and path="/about" .