React Router V6 Tutorial Create Dynamic Navigation Bar (NavBar) with Link & useNavigate Using Routes

Показать описание

(We're free online community, meet other makers!)

#reactjs #react #reactrouter #reacttutorial #coding #webdev #frontend #webdevelopment #programming Is your react v6 router not routing? In this tutorial we'll cover how to create router in React with a simple navigation bar with clickable links and buttons. We need to export Link, BrowserRouter, Routes and Route components from react-router-dom package.

React Router v6 article based on this video:

Tags: #reactjs #react #reactrouter #coding #programming #webdev #vscode #webdevelopment

Notes:
We no longer use useHistory in V6, so if you get the error:
useHistory was not found in react-router-dom
you should just use useNavigate instead.

Video Chapters:
00:00 React Router v6 Tutorial / React Routing
00:15 Installing react router using npm install
00:42 Import components (BrowserRouter, Router, Routes, Route)
01:37 How to Create Route Page Components (home, about, contact)
02:27 How to export page component as default function
03:22 How to use Route component to create URL pages
04:35 How to create default error page (page URL not found) in React
05:11 How To Create Navigation Bar (how to use Link component)
06:47 How to create Clickable button with React Router V6
07:02 useNavigate
08:18 How to pass parameter to URL (react router)

React simple router example, react router example, react router dom v6 how to use, test route

Related topics
---------------------------
react router v6 guide
react router v6 redirect
react router v6 docs
react router v6 history
react router v6 not routing
react router v6 useHistory
react router v6 redirect example
react router v6 redirect add query params
react router v6 redirect useNavigate
react router v6 redirect default route
npm install react-router-dom
react router dom