Skip to main content

React Router Flow

install

npm i react-router-dom

import

import { BrowserRouter, Routes, Route } from "react-router-dom"

Config routes

function App() {
   return (
     <BrowserRouter\>
       <Routes\>
         <Route path="/" element={<JSX_COMP/\>} /\>
         <Route path="/path" element={<JSX_COMP2/\>} /\>
       </Routes\>
     </BrowserRouter\>
   )
 }

Link to navigate

import { Link } from "react-router-dom"
 
 function My_Comp() {
   return (
     <div\>
       <nav\>
         <link to="/"\>Home<link/\>
         <link to="/page"\>Page<link/\>
       </nav\>
     </div\>
   )
 }

useNavigate to redirect

import { useNavigate } from "react-router-dom"

function My_Comp() {
  let navigate = useNavigate()
  
  return (
    <div\>
      <My_Form_Comp
        onSubmit={()=>navigate("/")}
      /\>
    </div\>
  )
}

References​