Every several months when I want to set up React Route in my React project, the setup process is always different from the previous one. Therefore, I am writing a quick memo to note the setup of React Route and its basic usage.
Setup React Route
bash
cd myReactProjectyarn add react-router-dom@6 # currently v6.8.0nvim src/App.tsx # or any file you want to put it in App.tsx
jsx
import "./App.css"; // 1. Insert this importimport { createBrowserRouter, RouterProvider,} from "react-router-dom"; import { HomePage, NewPage } from "./pages"; // 2. Create new Routesconst router = createBrowserRouter([ { path: "/", element: <HomePage />, }, { path: "/newPage", element: <NewPage />, },]); function App() { // 3. Insert Router Provider return <RouterProvider router={router} />;} export default App; Basic Usage
jsx
import { Link, useNavigate } from "react-router-dom"; // Example of a link in React Routerconst ExampleLink = () => { return <Link to="/newPage">Click Me</Link>} // Example of a navigate button in React Routerconst ExampleButton = () => { const navigate = useNavigate(); return <button onClick={()=>{navigate("/newPage")}}>Click me</button>} Reference: Tutorial - React Route
