Basic Navigation

You can read full guide and tutorial here

BrowserRouter is main component to cover all React application to make it routable.

Used for applications with a modern browser that supports the HTML5 history API. Allows you to use regular URLs (e.g., /about) for navigation.

import { BrowserRouter, Routes} from 'react-router-dom';

<BrowserRouter>
  <Routes>
    ...
  </Routes>
</BrowserRouter>

Used to declare a route and specify the component to render when the route matches the current location.

path: Specifies the URL path for the route.

component: Specifies the React component to render when the route is matched.

import { Route } from 'react-router-dom';

<Route path="/about" component={About} />

Reference : https://medium.com/@pratya.yeekhaday/reactjs-ทบทวน-react-router-dom-v6-สำหรับ-typescript-ec1b7e3427b7