Basic Navigation

You can read full guide and tutorial here

Components in React Router V6

BrowserRouter

BrowserRouter is main component to cover our 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>

useNavigate

• Directly redirect to page to specific URL
  

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

const navigate = useNavigate();
navigate('/another-page');

useParams

• Used to access path parameters, we will learn this in next chapter (dynamic routing)
  

• import { useParams} from 'react-router-dom';
  
   let { id } = useParams();

useSearchParams

• Used to get the query params in URL (some url might attach some data after "?" sign)

• Ex. /search?query=example will have query parameter query and the value is example.

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

const [searchParams] = useSearchParams();
const queryId = searchParams.get('id');

useLocation

• useLocation will return information of current URL such as :
  pathname  path of current URL
  search query parameters in current URL ex. "?id=123&name=John".
  hash hash fragment in URLURLe เช่น ex."#section-2".
  state state datanavigate from another page.

 

---

 

Navigation in React

In main.tsx file, you can desire the route as you want. In this case there are 4 routes.

Routes define

<BrowserRouter>
  <Routes>
    <Route path="*" element={<NoPage />} />
    <Route path="/" element={<Home />} />
    <Route path="/contact" element={<Contact />} />
    <Route path="/about" element={<About />} />
  </Routes>
</BrowserRouter>

<Route path="/" element={<Home />} /> define "/" path and render the <Home /> element

<Route path="/contact" element={<Contact />} /> define "/" path and render the <Contact /> element

<Route path="*" element={<NoPage />} /> When there is no path match will render<NoPage /> element because "*" means any path in URL

Links define.

When use click on Link element, it will tell the page to go to URL in "to={"/path"}"attribute

//example of Home element
import React from "react";
import { useLocationLink } from "react-router-dom";

constexport locationdefault =function useLocation(Home() {
  return (
    <>
      <div className="navbar">
        <div>
          <Link to={"/"} className="menu-link">
            Home
          </Link>
          <Link to={"/about"} className="menu-link">
            About
          </Link>
          <Link to={"/contact"} className="menu-link">
            Contact
          </Link>
        </div>
      </div>
      <div className="main">
        <h1>Home Page</h1>
      </div>
    </>
  );
console.log(location);}

Link

When

click

• Used to createat the link,about whenbutton, clickthe to link URLpage will changerender about page as we define in Route element in main.tsx

• 

  to: Specifies the URL path that will redirect to

 

 

 

 

 

 

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