Skip to main content

Basic Navigation

You can read full guide and tutorial here

Components in React Router

BrowserRouter

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>
Route

  • 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" element={About} />
Routes

  • Control all path in the React application we will use Route component in this Routes component.

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

<Routes>
  <Route path="/about" element={About} />
  ...
</Routes>

  • Used to create the link, when click to link URL will change

  • to: Specifies the URL path that will redirect to

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

Back to top