React router component

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. You can define the path and element which will be render according to that path

import { createBrowserRouter, RouterProvider} from "react-router-dom";
import App from './App.jsx'
const router = createBrowserRouter([
  {
    path: "/",
    element: <App/>,
  },
]);

ReactDOM.createRoot(document.getElementById("root")).render(
  <React.StrictMode>
    <RouterProvider router={router} />
  </React.StrictMode>
);

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 URLe ex."#section-2".
state state datanavigate from another page.