{"id":83718,"date":"2024-11-13T23:51:49","date_gmt":"2024-11-13T20:21:49","guid":{"rendered":"https:\/\/nabfollower.com\/blog\/react-router-concepts-and-practical-guidepart-1-1i2f\/"},"modified":"2024-11-13T23:51:49","modified_gmt":"2024-11-13T20:21:49","slug":"react-router-concepts-and-practical-guidepart-1-1i2f","status":"publish","type":"post","link":"https:\/\/nabfollower.com\/blog\/react-router-concepts-and-practical-guidepart-1-1i2f\/","title":{"rendered":"React Router: \u0645\u0641\u0627\u0647\u06cc\u0645 \u0648 \u0631\u0627\u0647\u0646\u0645\u0627\u06cc \u0639\u0645\u0644\u06cc (\u0642\u0633\u0645\u062a 1)"},"content":{"rendered":"<p>Summarize this content to 400 words in Persian Lang <\/p>\n<p>  \u0631\u0627\u0647\u0646\u0645\u0627\u06cc \u0646\u0647\u0627\u06cc\u06cc \u0628\u0631\u0627\u06cc \u0631\u0648\u062a\u0631 \u0648\u0627\u06a9\u0646\u0634: \u0645\u0641\u0627\u0647\u06cc\u0645 \u0648 \u0631\u0627\u0647\u0646\u0645\u0627\u06cc \u0639\u0645\u0644\u06cc<\/p>\n<p>  \u0645\u0642\u062f\u0645\u0647<\/p>\n<p>\u0645\u0633\u06cc\u0631\u06cc\u0627\u0628\u06cc \u06cc\u06a9 \u0648\u06cc\u0698\u06af\u06cc \u0636\u0631\u0648\u0631\u06cc \u062f\u0631 \u0647\u0631 \u0628\u0631\u0646\u0627\u0645\u0647 \u0648\u0628 \u0645\u062f\u0631\u0646 \u0627\u0633\u062a. \u0627\u06cc\u0646 \u0628\u0647 \u06a9\u0627\u0631\u0628\u0631\u0627\u0646 \u0627\u062c\u0627\u0632\u0647 \u0645\u06cc \u062f\u0647\u062f \u062a\u0627 \u0628\u06cc\u0646 \u0628\u062e\u0634 \u0647\u0627 \u06cc\u0627 \u0635\u0641\u062d\u0627\u062a \u0645\u062e\u062a\u0644\u0641 \u0628\u0647 \u0637\u0648\u0631 \u06cc\u06a9\u067e\u0627\u0631\u0686\u0647 \u062d\u0631\u06a9\u062a \u06a9\u0646\u0646\u062f \u0648 \u062a\u062c\u0631\u0628\u0647 \u0627\u06cc \u0631\u0648\u0627\u0646 \u0648 \u062a\u0639\u0627\u0645\u0644\u06cc \u0627\u06cc\u062c\u0627\u062f \u06a9\u0646\u0646\u062f. \u062f\u0631 React\u060c \u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u0627\u06cc\u0646 \u0627\u0645\u0631 \u0628\u0647 \u062f\u0633\u062a \u0645\u06cc \u0622\u06cc\u062f \u0631\u0648\u062a\u0631 \u0648\u0627\u06a9\u0646\u0634\u060c \u06cc\u06a9 \u06a9\u062a\u0627\u0628\u062e\u0627\u0646\u0647 \u0642\u062f\u0631\u062a\u0645\u0646\u062f \u06a9\u0647 \u0628\u0631\u0627\u06cc \u0645\u062f\u06cc\u0631\u06cc\u062a \u0645\u0633\u06cc\u0631\u06cc\u0627\u0628\u06cc \u062f\u0631 \u0628\u0631\u0646\u0627\u0645\u0647 \u0647\u0627\u06cc \u06a9\u0627\u0631\u0628\u0631\u062f\u06cc \u06cc\u06a9 \u0635\u0641\u062d\u0647 (SPA) \u0637\u0631\u0627\u062d\u06cc \u0634\u062f\u0647 \u0627\u0633\u062a.<\/p>\n<p>React Router \u0641\u0631\u0622\u06cc\u0646\u062f \u0627\u06cc\u062c\u0627\u062f \u0645\u0633\u06cc\u0631\u0647\u0627\u06cc \u067e\u0648\u06cc\u0627 \u0648 \u062a\u0648\u062f\u0631\u062a\u0648\u060c \u0645\u062f\u06cc\u0631\u06cc\u062a \u067e\u0627\u0631\u0627\u0645\u062a\u0631\u0647\u0627\u06cc URL\u060c \u067e\u06cc\u0627\u062f\u0647 \u0633\u0627\u0632\u06cc \u0645\u0633\u06cc\u0631\u0647\u0627\u06cc \u0645\u062d\u0627\u0641\u0638\u062a \u0634\u062f\u0647 \u0648 \u0645\u0648\u0627\u0631\u062f \u062f\u06cc\u06af\u0631 \u0631\u0627 \u0633\u0627\u062f\u0647 \u0645\u06cc \u06a9\u0646\u062f. \u062f\u0631 \u0627\u06cc\u0646 \u0631\u0627\u0647\u0646\u0645\u0627\u06cc \u062c\u0627\u0645\u0639\u060c \u062a\u0645\u0627\u0645 \u062c\u0646\u0628\u0647\u200c\u0647\u0627\u06cc React Router \u0631\u0627 \u0628\u0631\u0631\u0633\u06cc \u0645\u06cc\u200c\u06a9\u0646\u06cc\u0645\u060c \u0645\u0641\u0627\u0647\u06cc\u0645 \u0622\u0646 \u0631\u0627 \u06af\u0627\u0645 \u0628\u0647 \u06af\u0627\u0645 \u062a\u062c\u0632\u06cc\u0647 \u0645\u06cc\u200c\u06a9\u0646\u06cc\u0645 \u0648 \u0622\u0646\u0647\u0627 \u0631\u0627 \u0628\u0627 \u0645\u062b\u0627\u0644\u200c\u0647\u0627\u06cc \u0639\u0645\u0644\u06cc \u067e\u06cc\u0627\u062f\u0647\u200c\u0633\u0627\u0632\u06cc \u0645\u06cc\u200c\u06a9\u0646\u06cc\u0645.<\/p>\n<p>  \u0631\u0648\u062a\u0631 React \u0686\u06cc\u0633\u062a\u061f<\/p>\n<p>React Router \u06cc\u06a9 \u06a9\u062a\u0627\u0628\u062e\u0627\u0646\u0647 \u0627\u0639\u0644\u0627\u0645\u06cc \u0648 \u0645\u0628\u062a\u0646\u06cc \u0628\u0631 \u0645\u0624\u0644\u0641\u0647 \u0628\u0631\u0627\u06cc \u0645\u062f\u06cc\u0631\u06cc\u062a \u0645\u0633\u06cc\u0631\u06cc\u0627\u0628\u06cc \u062f\u0631 \u0628\u0631\u0646\u0627\u0645\u0647 \u0647\u0627\u06cc React \u0627\u0633\u062a. \u0627\u0632 \u06cc\u06a9 \u0631\u0648\u06cc\u06a9\u0631\u062f \u0645\u062f\u0631\u0646 \u0628\u0631\u0627\u06cc \u0646\u06af\u0627\u0634\u062a URL \u0647\u0627 \u0628\u0647 \u0627\u062c\u0632\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0645\u06cc \u06a9\u0646\u062f \u0648 \u0628\u0647 \u062a\u0648\u0633\u0639\u0647 \u062f\u0647\u0646\u062f\u06af\u0627\u0646 \u0627\u06cc\u0646 \u0627\u0645\u06a9\u0627\u0646 \u0631\u0627 \u0645\u06cc \u062f\u0647\u062f \u062a\u0627 SPA \u0647\u0627\u06cc \u0645\u0642\u06cc\u0627\u0633 \u067e\u0630\u06cc\u0631 \u0648 \u067e\u0648\u06cc\u0627 \u0631\u0627 \u0628\u0647 \u0631\u0627\u062d\u062a\u06cc \u0628\u0633\u0627\u0632\u0646\u062f.<\/p>\n<p>  \u0648\u06cc\u0698\u06af\u06cc \u0647\u0627\u06cc \u06a9\u0644\u06cc\u062f\u06cc React Router<\/p>\n<p>\u0645\u0633\u06cc\u0631\u06cc\u0627\u0628\u06cc \u0627\u0639\u0644\u0627\u0645\u06cc: \u0645\u0633\u06cc\u0631\u0647\u0627 \u0631\u0627 \u0628\u0647 \u0639\u0646\u0648\u0627\u0646 \u0627\u062c\u0632\u0627\u0621 \u062a\u0639\u0631\u06cc\u0641 \u06a9\u0646\u06cc\u062f \u06a9\u0647 \u062f\u0631\u06a9 \u0648 \u0646\u06af\u0647\u062f\u0627\u0631\u06cc \u0633\u06cc\u0633\u062a\u0645 \u0645\u0633\u06cc\u0631\u06cc\u0627\u0628\u06cc \u0631\u0627 \u0622\u0633\u0627\u0646 \u0645\u06cc \u06a9\u0646\u062f.<\/p>\n<p>\u0645\u0633\u06cc\u0631\u06cc\u0627\u0628\u06cc \u067e\u0648\u06cc\u0627: \u06a9\u0646\u062a\u0631\u0644 \u067e\u0627\u0631\u0627\u0645\u062a\u0631\u0647\u0627\u06cc \u067e\u0648\u06cc\u0627 \u062f\u0631 URL \u0647\u0627\u06cc\u06cc \u0645\u0627\u0646\u0646\u062f \/user\/:id \u0628\u0631\u0627\u06cc \u0627\u06cc\u062c\u0627\u062f \u0645\u0633\u06cc\u0631\u0647\u0627\u06cc \u0627\u0646\u0639\u0637\u0627\u0641 \u067e\u0630\u06cc\u0631 \u0648 \u0642\u0627\u0628\u0644 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0645\u062c\u062f\u062f.<\/p>\n<p>\u0645\u0633\u06cc\u0631\u0647\u0627\u06cc \u062a\u0648 \u062f\u0631 \u062a\u0648: \u0645\u0633\u06cc\u0631\u0647\u0627\u06cc \u062e\u0648\u062f \u0631\u0627 \u0628\u0647 \u0635\u0648\u0631\u062a \u0633\u0644\u0633\u0644\u0647 \u0645\u0631\u0627\u062a\u0628\u06cc \u0633\u0627\u0632\u0645\u0627\u0646\u062f\u0647\u06cc \u06a9\u0646\u06cc\u062f \u0648 \u0631\u0648\u0627\u0628\u0637 \u0648\u0627\u0644\u062f\u06cc\u0646 \u0648 \u0641\u0631\u0632\u0646\u062f \u0631\u0627 \u0641\u0639\u0627\u0644 \u06a9\u0646\u06cc\u062f.<\/p>\n<p>\u0645\u0633\u06cc\u0631\u0647\u0627\u06cc \u0645\u062d\u0627\u0641\u0638\u062a \u0634\u062f\u0647: \u0645\u0633\u06cc\u0631\u0647\u0627\u06cc \u062e\u0627\u0635 \u0631\u0627 \u062f\u0631 \u067e\u0634\u062a \u0627\u062d\u0631\u0627\u0632 \u0647\u0648\u06cc\u062a \u06cc\u0627 \u0645\u062c\u0648\u0632 \u0627\u06cc\u0645\u0646 \u06a9\u0646\u06cc\u062f.<\/p>\n<p>\u0646\u0627\u0648\u0628\u0631\u06cc \u0628\u0631\u0646\u0627\u0645\u0647 \u0627\u06cc: \u0628\u06cc\u0646 \u0635\u0641\u062d\u0627\u062a \u0628\u0647 \u0635\u0648\u0631\u062a \u0628\u0631\u0646\u0627\u0645\u0647 \u0646\u0648\u06cc\u0633\u06cc \u0628\u0631 \u0627\u0633\u0627\u0633 \u0627\u0642\u062f\u0627\u0645\u0627\u062a \u06a9\u0627\u0631\u0628\u0631 \u067e\u06cc\u0645\u0627\u06cc\u0634 \u06a9\u0646\u06cc\u062f.<\/p>\n<p>\u067e\u0634\u062a\u06cc\u0628\u0627\u0646\u06cc \u0627\u0632 \u062a\u0627\u0631\u06cc\u062e\u0686\u0647 \u0645\u0631\u0648\u0631\u06af\u0631: \u0628\u0627 \u067e\u06cc\u0645\u0627\u06cc\u0634 \u0645\u0631\u0648\u0631\u06af\u0631\u060c \u0627\u0632 \u062c\u0645\u0644\u0647 \u0627\u0642\u062f\u0627\u0645\u0627\u062a \u0631\u0648 \u0628\u0647 \u062c\u0644\u0648\u060c \u0639\u0642\u0628 \u0648 \u062a\u0627\u0632\u0647 \u06a9\u0631\u062f\u0646 \u0647\u0645\u06af\u0627\u0645 \u0633\u0627\u0632\u06cc \u06a9\u0646\u06cc\u062f.<\/p>\n<p>  \u0646\u0635\u0628 \u0631\u0648\u062a\u0631 React<\/p>\n<p>\u0642\u0628\u0644 \u0627\u0632 \u0634\u0631\u0648\u0639\u060c \u0627\u062c\u0627\u0632\u0647 \u062f\u0647\u06cc\u062f React Router \u0631\u0627 \u062f\u0631 \u067e\u0631\u0648\u0698\u0647 \u062e\u0648\u062f \u0631\u0627\u0647 \u0627\u0646\u062f\u0627\u0632\u06cc \u06a9\u0646\u06cc\u0645. \u06a9\u062a\u0627\u0628\u062e\u0627\u0646\u0647 \u0631\u0627 \u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 npm \u06cc\u0627 yarn \u0646\u0635\u0628 \u06a9\u0646\u06cc\u062f:<\/p>\n<p># Using npm<br \/>\nnpm install react-router-dom<\/p>\n<p># Using yarn<br \/>\nyarn add react-router-dom<\/p>\n<p>    \u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/p>\n<p>    \u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/p>\n<p>\u067e\u0633 \u0627\u0632 \u0646\u0635\u0628\u060c \u0622\u0645\u0627\u062f\u0647 \u0627\u062f\u063a\u0627\u0645 React Router \u062f\u0631 \u0628\u0631\u0646\u0627\u0645\u0647 \u062e\u0648\u062f \u0647\u0633\u062a\u06cc\u062f.<\/p>\n<p>  \u0645\u0641\u0627\u0647\u06cc\u0645 \u0627\u0635\u0644\u06cc \u0631\u0648\u062a\u0631 React<\/p>\n<p>React Router \u062d\u0648\u0644 \u0686\u0646\u062f \u0645\u0641\u0647\u0648\u0645 \u0627\u0635\u0644\u06cc \u0645\u06cc \u0686\u0631\u062e\u062f \u200b\u200b\u06a9\u0647 \u067e\u0627\u06cc\u0647 \u0648 \u0627\u0633\u0627\u0633 \u0633\u06cc\u0633\u062a\u0645 \u0645\u0633\u06cc\u0631\u06cc\u0627\u0628\u06cc \u0622\u0646 \u0631\u0627 \u062a\u0634\u06a9\u06cc\u0644 \u0645\u06cc \u062f\u0647\u0646\u062f. \u0628\u06cc\u0627\u06cc\u06cc\u062f \u0622\u0646\u0647\u0627 \u0631\u0627 \u0645\u0631\u062d\u0644\u0647 \u0628\u0647 \u0645\u0631\u062d\u0644\u0647 \u062a\u062c\u0632\u06cc\u0647 \u06a9\u0646\u06cc\u0645.<\/p>\n<p>  1. BrowserRouter \u0648 \u0627\u062c\u0632\u0627\u06cc \u0631\u0648\u062a\u0631<\/p>\n<p>\u062f\u0631 \u0633\u0637\u062d \u0628\u0627\u0644\u0627\u06cc \u0628\u0631\u0646\u0627\u0645\u0647 React \u062e\u0648\u062f\u060c \u0628\u0627\u06cc\u062f \u0647\u0645\u0647 \u0686\u06cc\u0632 \u0631\u0627 \u062f\u0627\u062e\u0644 a \u0628\u067e\u06cc\u0686\u06cc\u062f \u0631\u0648\u062a\u0631. \u0631\u0648\u062a\u0631 React \u0627\u0646\u0648\u0627\u0639 \u0645\u062e\u062a\u0644\u0641\u06cc \u0627\u0632 \u0631\u0648\u062a\u0631\u0647\u0627 \u0631\u0627 \u0627\u0631\u0627\u0626\u0647 \u0645\u06cc \u062f\u0647\u062f\u060c \u0627\u0645\u0627 \u0631\u0627\u06cc\u062c \u062a\u0631\u06cc\u0646 \u0622\u0646\u0647\u0627 \u0627\u0633\u062a BrowserRouter\u060c \u06a9\u0647 \u0627\u0632 API \u062a\u0627\u0631\u06cc\u062e\u0686\u0647 \u0645\u0631\u0648\u0631\u06af\u0631 \u0628\u0631\u0627\u06cc \u0645\u062f\u06cc\u0631\u06cc\u062a \u067e\u06cc\u0645\u0627\u06cc\u0634 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0645\u06cc \u06a9\u0646\u062f.<\/p>\n<p>  \u0646\u06a9\u0627\u062a \u06a9\u0644\u06cc\u062f\u06cc \u062f\u0631 \u0645\u0648\u0631\u062f BrowserRouter<\/p>\n<p>\u0632\u0645\u06cc\u0646\u0647 \u0645\u0648\u0631\u062f \u0646\u06cc\u0627\u0632 \u0628\u0631\u0627\u06cc \u0645\u0633\u06cc\u0631\u06cc\u0627\u0628\u06cc \u0631\u0627 \u0641\u0631\u0627\u0647\u0645 \u0645\u06cc \u06a9\u0646\u062f.<br \/>\n\u0628\u0647 \u062a\u063a\u06cc\u06cc\u0631\u0627\u062a URL \u0645\u0631\u0648\u0631\u06af\u0631 \u06af\u0648\u0634 \u0645\u06cc \u062f\u0647\u062f \u0648 \u0627\u062c\u0632\u0627\u06cc \u0622\u0646 \u0631\u0627 \u0645\u062c\u062f\u062f\u0627\u064b \u0627\u0631\u0627\u0626\u0647 \u0645\u06cc \u062f\u0647\u062f.<br \/>\n\u0627\u0646\u0648\u0627\u0639 \u062f\u06cc\u06af\u0631 \u0631\u0648\u062a\u0631\u0647\u0627 \u0645\u0627\u0646\u0646\u062f HashRouter\u060c \u0627\u0632 \u0647\u0634 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u06a9\u0646\u06cc\u062f (#) \u062f\u0631 URL \u0628\u0631\u0627\u06cc \u067e\u06cc\u0645\u0627\u06cc\u0634\u060c \u0627\u0645\u0627 BrowserRouter \u0628\u06cc\u0634\u062a\u0631 \u062f\u0631 \u06a9\u0627\u0631\u0628\u0631\u062f\u0647\u0627\u06cc \u0645\u062f\u0631\u0646 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0645\u06cc \u0634\u0648\u062f.<\/p>\n<p>  \u0646\u062d\u0648\u0647 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 BrowserRouter<\/p>\n<p>\u062f\u0631 \u0627\u06cc\u0646\u062c\u0627 \u06cc\u06a9 \u0645\u062b\u0627\u0644 \u0627\u0633\u0627\u0633\u06cc \u0627\u0632 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0633\u062a BrowserRouter:<\/p>\n<p>import React from &#8220;react&#8221;;<br \/>\nimport { BrowserRouter } from &#8220;react-router-dom&#8221;;<\/p>\n<p>function App() {<br \/>\n    return (<br \/>\n        &lt;BrowserRouter&gt;<br \/>\n            &lt;div&gt;<br \/>\n                &lt;h1&gt;Welcome to My Apph1&gt;<br \/>\n                &lt;p&gt;Routing starts here!p&gt;<br \/>\n            div&gt;<br \/>\n        BrowserRouter&gt;<br \/>\n    );<br \/>\n}<\/p>\n<p>export default App;<\/p>\n<p>    \u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/p>\n<p>    \u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/p>\n<p>\u062a\u0648\u0636\u06cc\u062d:<\/p>\n<p>\u0645\u0627 \u0648\u0627\u0631\u062f \u0645\u06cc \u06a9\u0646\u06cc\u0645 BrowserRouter \u0627\u0632 react-router-dom.<br \/>\n\u0627\u06cc\u0646 BrowserRouter \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a \u06a9\u0644 \u0628\u0631\u0646\u0627\u0645\u0647 \u0631\u0627 \u0645\u06cc \u067e\u06cc\u0686\u062f \u062a\u0627 \u0639\u0645\u0644\u06a9\u0631\u062f \u0645\u0633\u06cc\u0631\u06cc\u0627\u0628\u06cc \u0631\u0627 \u0641\u0639\u0627\u0644 \u06a9\u0646\u062f.<\/p>\n<p>\u062a\u0648\u062c\u0647 \u062f\u0627\u0634\u062a\u0647 \u0628\u0627\u0634\u06cc\u062f: \u0634\u0645\u0627 \u0641\u0642\u0637 \u0645\u06cc \u062a\u0648\u0627\u0646\u06cc\u062f \u06cc\u06a9\u06cc \u062f\u0627\u0634\u062a\u0647 \u0628\u0627\u0634\u06cc\u062f BrowserRouter \u062f\u0631 \u0631\u06cc\u0634\u0647 \u0628\u0631\u0646\u0627\u0645\u0647 \u0634\u0645\u0627.<\/p>\n<p>  2. \u0645\u0633\u06cc\u0631\u0647\u0627 \u0648 \u0627\u062c\u0632\u0627\u06cc \u0645\u0633\u06cc\u0631<\/p>\n<p>\u067e\u0633 \u0627\u0632 \u0628\u0633\u062a\u0647 \u0628\u0646\u062f\u06cc \u0628\u0631\u0646\u0627\u0645\u0647 \u062e\u0648\u062f \u0628\u0627 BrowserRouter\u060c \u0645\u0633\u06cc\u0631\u0647\u0627\u06cc \u0641\u0631\u062f\u06cc \u0631\u0627 \u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 Routes  \u0648 Route  \u0627\u062c\u0632\u0627\u0621 <\/p>\n<p>  \u0645\u0633\u06cc\u0631\u0647\u0627 \u0648 \u0627\u062c\u0632\u0627\u06cc \u0645\u0633\u06cc\u0631 \u0686\u06cc\u0633\u062a\u061f<\/p>\n<p>Routes: \u0645\u062d\u0641\u0638\u0647 \u0627\u06cc \u0628\u0631\u0627\u06cc \u062a\u0645\u0627\u0645 \u0645\u0633\u06cc\u0631\u0647\u0627\u06cc \u0628\u0631\u0646\u0627\u0645\u0647 \u0634\u0645\u0627.<\/p>\n<p>Route: \u06cc\u06a9 \u0645\u0633\u06cc\u0631 \u0648\u0627\u062d\u062f \u0631\u0627 \u0646\u0634\u0627\u0646 \u0645\u06cc \u062f\u0647\u062f \u0648 \u062a\u0639\u0631\u06cc\u0641 \u0645\u06cc \u06a9\u0646\u062f:<\/p>\n<p>path: \u0645\u0633\u06cc\u0631 URL \u0628\u0631\u0627\u06cc \u0645\u0637\u0627\u0628\u0642\u062a.<\/p>\n<p>element: \u0645\u0624\u0644\u0641\u0647 React \u0628\u0631\u0627\u06cc \u0631\u0646\u062f\u0631 \u062f\u0631 \u0635\u0648\u0631\u062a \u0645\u0637\u0627\u0628\u0642\u062a \u0645\u0633\u06cc\u0631.<\/p>\n<p>  \u0645\u062b\u0627\u0644 \u067e\u0627\u06cc\u0647<\/p>\n<p>import React from &#8220;react&#8221;;<br \/>\nimport { BrowserRouter, Routes, Route } from &#8220;react-router-dom&#8221;;<\/p>\n<p>function Home() {<br \/>\n    return &lt;h1&gt;Home Pageh1&gt;;<br \/>\n}<\/p>\n<p>function About() {<br \/>\n    return &lt;h1&gt;About Pageh1&gt;;<br \/>\n}<\/p>\n<p>function App() {<br \/>\n    return (<br \/>\n        &lt;BrowserRouter&gt;<br \/>\n            &lt;Routes&gt;<br \/>\n                &lt;Route path=&#8221;https:\/\/dev.to\/&#8221; element={&lt;Home \/&gt;} \/&gt;<br \/>\n                &lt;Route path=&#8221;https:\/\/dev.to\/about&#8221; element={&lt;About \/&gt;} \/&gt;<br \/>\n            Routes&gt;<br \/>\n        BrowserRouter&gt;<br \/>\n    );<br \/>\n}<\/p>\n<p>export default App;<\/p>\n<p>    \u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/p>\n<p>    \u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/p>\n<p>\u062a\u0648\u0636\u06cc\u062d:<\/p>\n<p>path=&#8221;https:\/\/dev.to\/&#8221;: \u0627\u06cc\u0646 \u0645\u0633\u06cc\u0631 \u0628\u0627 URL \u0631\u06cc\u0634\u0647 \u0645\u0637\u0627\u0628\u0642\u062a \u062f\u0627\u0631\u062f (\/) \u0648 \u0631\u0646\u062f\u0631 \u0645\u06cc \u06a9\u0646\u062f Home \u062c\u0632\u0621<\/p>\n<p>path=&#8221;https:\/\/dev.to\/about&#8221;: \u0645\u0633\u0627\u0628\u0642\u0627\u062a \/about \u0648 \u0631\u0646\u062f\u0631 \u0645\u06cc \u06a9\u0646\u062f About \u062c\u0632\u0621<br \/>\n\u0647\u0646\u06af\u0627\u0645\u06cc \u06a9\u0647 URL \u062a\u063a\u06cc\u06cc\u0631 \u0645\u06cc \u06a9\u0646\u062f (\u0628\u0647 \u0639\u0646\u0648\u0627\u0646 \u0645\u062b\u0627\u0644\u060c \/about) React Router \u0628\u0647 \u0637\u0648\u0631 \u062e\u0648\u062f\u06a9\u0627\u0631 \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a \u0645\u0631\u0628\u0648\u0637\u0647 \u0631\u0627 \u0631\u0646\u062f\u0631 \u0645\u06cc \u06a9\u0646\u062f.<\/p>\n<p>  3. \u0627\u062c\u0632\u0627\u06cc \u067e\u06cc\u0648\u0646\u062f \u0648 NavLink<\/p>\n<p>\u062f\u0631 \u06cc\u06a9 \u0628\u0631\u0646\u0627\u0645\u0647 React \u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u0633\u0646\u062a\u06cc  \u0628\u0631\u0686\u0633\u0628\u200c\u0647\u0627 \u0628\u0631\u0627\u06cc \u067e\u06cc\u0645\u0627\u06cc\u0634 \u0628\u0627\u0639\u062b \u0645\u06cc\u200c\u0634\u0648\u0646\u062f \u0645\u0631\u0648\u0631\u06af\u0631 \u0635\u0641\u062d\u0647 \u0631\u0627 \u062f\u0648\u0628\u0627\u0631\u0647 \u0628\u0627\u0631\u06af\u06cc\u0631\u06cc \u06a9\u0646\u062f. \u0631\u0648\u062a\u0631 React \u0641\u0631\u0627\u0647\u0645 \u0645\u06cc \u06a9\u0646\u062f Link  \u0648 NavLink  \u0645\u0648\u0644\u0641\u0647 \u0647\u0627\u06cc\u06cc \u0628\u0631\u0627\u06cc \u067e\u06cc\u0645\u0627\u06cc\u0634 \u06cc\u06a9\u067e\u0627\u0631\u0686\u0647 \u0628\u062f\u0648\u0646 \u0628\u0627\u0632\u062e\u0648\u0627\u0646\u06cc \u0635\u0641\u062d\u0647.<\/p>\n<p>  \u0645\u0624\u0644\u0641\u0647 \u067e\u06cc\u0648\u0646\u062f<\/p>\n<p>\u0627\u06cc\u0646 Link \u0645\u0624\u0644\u0641\u0647 \u0628\u0647 \u0634\u0645\u0627 \u0627\u0645\u06a9\u0627\u0646 \u0645\u06cc \u062f\u0647\u062f \u0628\u0627 \u0628\u0647 \u0631\u0648\u0632 \u0631\u0633\u0627\u0646\u06cc URL \u0628\u062f\u0648\u0646 \u0628\u0627\u0631\u06af\u06cc\u0631\u06cc \u0645\u062c\u062f\u062f \u0635\u0641\u062d\u0647\u060c \u0628\u06cc\u0646 \u0645\u0633\u06cc\u0631\u0647\u0627 \u062d\u0631\u06a9\u062a \u06a9\u0646\u06cc\u062f.<\/p>\n<p>import React from &#8220;react&#8221;;<br \/>\nimport { BrowserRouter, Routes, Route, Link } from &#8220;react-router-dom&#8221;;<\/p>\n<p>function Home() {<br \/>\n    return &lt;h1&gt;Home Pageh1&gt;;<br \/>\n}<\/p>\n<p>function About() {<br \/>\n    return &lt;h1&gt;About Pageh1&gt;;<br \/>\n}<\/p>\n<p>function Navbar() {<br \/>\n    return (<br \/>\n        &lt;nav&gt;<br \/>\n            &lt;Link to=&#8221;https:\/\/dev.to\/&#8221;&gt;HomeLink&gt;<br \/>\n            &lt;Link to=&#8221;https:\/\/dev.to\/about&#8221;&gt;AboutLink&gt;<br \/>\n        nav&gt;<br \/>\n    );<br \/>\n}<\/p>\n<p>function App() {<br \/>\n    return (<br \/>\n        &lt;BrowserRouter&gt;<br \/>\n            &lt;Navbar \/&gt;<br \/>\n            &lt;Routes&gt;<br \/>\n                &lt;Route path=&#8221;https:\/\/dev.to\/&#8221; element={&lt;Home \/&gt;} \/&gt;<br \/>\n                &lt;Route path=&#8221;https:\/\/dev.to\/about&#8221; element={&lt;About \/&gt;} \/&gt;<br \/>\n            Routes&gt;<br \/>\n        BrowserRouter&gt;<br \/>\n    );<br \/>\n}<\/p>\n<p>export default App;<\/p>\n<p>    \u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/p>\n<p>    \u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/p>\n<p>\u062a\u0648\u0636\u06cc\u062d:<\/p>\n<p>Link  \u062c\u0627\u06cc\u06af\u0632\u06cc\u0646 \u0633\u0646\u062a\u06cc \u0645\u06cc \u0634\u0648\u062f  \u0628\u0631\u0686\u0633\u0628 \u0647\u0627<br \/>\n\u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u06a9\u0646\u06cc\u062f to prop \u0628\u0631\u0627\u06cc \u062a\u0639\u06cc\u06cc\u0646 \u0645\u0633\u06cc\u0631 \u0645\u0642\u0635\u062f.<\/p>\n<p>  \u0645\u0624\u0644\u0641\u0647 NavLink<\/p>\n<p>\u0627\u06cc\u0646 NavLink \u062c\u0632\u0621 \u0645\u0634\u0627\u0628\u0647 \u0627\u0633\u062a Link\u060c \u0627\u0645\u0627 \u0628\u0647 \u0634\u0645\u0627 \u0627\u0645\u06a9\u0627\u0646 \u0645\u06cc \u062f\u0647\u062f \u0644\u06cc\u0646\u06a9 \u0631\u0627 \u0628\u0631 \u0627\u0633\u0627\u0633 \u0641\u0639\u0627\u0644 \u0628\u0648\u062f\u0646 \u0622\u0646 \u0627\u0633\u062a\u0627\u06cc\u0644 \u062f\u0647\u06cc\u062f.<\/p>\n<p>import React from &#8220;react&#8221;;<br \/>\nimport { NavLink } from &#8220;react-router-dom&#8221;;<\/p>\n<p>function Navbar() {<br \/>\n    return (<br \/>\n        &lt;nav&gt;<br \/>\n            &lt;NavLink to=&#8221;https:\/\/dev.to\/&#8221; activeClassName=&#8221;active&#8221;&gt;HomeNavLink&gt;<br \/>\n            &lt;NavLink to=&#8221;https:\/\/dev.to\/about&#8221; activeClassName=&#8221;active&#8221;&gt;AboutNavLink&gt;<br \/>\n        nav&gt;<br \/>\n    );<br \/>\n}<\/p>\n<p>    \u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/p>\n<p>    \u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/p>\n<p>\u062a\u0641\u0627\u0648\u062a \u06a9\u0644\u06cc\u062f\u06cc:<\/p>\n<p>\u0627\u06cc\u0646 NavLink \u062c\u0632\u0621 \u0627\u0636\u0627\u0641\u0647 \u0645\u06cc \u06a9\u0646\u062f activeClassName (\u06cc\u0627 isActive) \u0628\u0631\u0627\u06cc \u0627\u0633\u062a\u0627\u06cc\u0644 \u062f\u0627\u062f\u0646 \u0628\u0647 \u0644\u06cc\u0646\u06a9 \u0647\u0627\u06cc \u0641\u0639\u0627\u0644.<\/p>\n<p>  \u0642\u0631\u0627\u0631 \u062f\u0627\u062f\u0646 \u0622\u0646 \u0647\u0645\u0647 \u0628\u0627 \u0647\u0645<\/p>\n<p>\u0628\u06cc\u0627\u06cc\u06cc\u062f \u0627\u06cc\u0646 \u0645\u0641\u0627\u0647\u06cc\u0645 \u0631\u0627 \u062f\u0631 \u06cc\u06a9 \u0645\u062b\u0627\u0644 \u06a9\u0648\u0686\u06a9 \u0628\u0631\u0646\u0627\u0645\u0647 \u06a9\u0627\u0631\u0628\u0631\u062f\u06cc \u062a\u0631\u06a9\u06cc\u0628 \u06a9\u0646\u06cc\u0645:<\/p>\n<p>import React from &#8220;react&#8221;;<br \/>\nimport { BrowserRouter, Routes, Route, Link } from &#8220;react-router-dom&#8221;;<\/p>\n<p>function Home() {<br \/>\n    return &lt;h1&gt;Welcome to the Home Page!h1&gt;;<br \/>\n}<\/p>\n<p>function About() {<br \/>\n    return &lt;h1&gt;Learn More About Ush1&gt;;<br \/>\n}<\/p>\n<p>function Navbar() {<br \/>\n    return (<br \/>\n        &lt;nav&gt;<br \/>\n            &lt;Link to=&#8221;https:\/\/dev.to\/&#8221;&gt;HomeLink&gt;<br \/>\n            &lt;Link to=&#8221;https:\/\/dev.to\/about&#8221;&gt;AboutLink&gt;<br \/>\n        nav&gt;<br \/>\n    );<br \/>\n}<\/p>\n<p>function App() {<br \/>\n    return (<br \/>\n        &lt;BrowserRouter&gt;<br \/>\n            &lt;Navbar \/&gt;<br \/>\n            &lt;Routes&gt;<br \/>\n                &lt;Route path=&#8221;https:\/\/dev.to\/&#8221; element={&lt;Home \/&gt;} \/&gt;<br \/>\n                &lt;Route path=&#8221;https:\/\/dev.to\/about&#8221; element={&lt;About \/&gt;} \/&gt;<br \/>\n            Routes&gt;<br \/>\n        BrowserRouter&gt;<br \/>\n    );<br \/>\n}<\/p>\n<p>export default App;<\/p>\n<p>    \u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/p>\n<p>    \u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/p>\n<p>  \u062e\u0631\u0648\u062c\u06cc:<\/p>\n<p>\u062d\u0631\u06a9\u062a \u0628\u0647 \/ \u0628\u0631\u0627\u06cc \u062f\u06cc\u062f\u0646 \u0635\u0641\u062d\u0647 \u0627\u0635\u0644\u06cc<br \/>\n\u062d\u0631\u06a9\u062a \u0628\u0647 \/about \u0628\u0631\u0627\u06cc \u062f\u06cc\u062f\u0646 \u0635\u0641\u062d\u0647 \u062f\u0631\u0628\u0627\u0631\u0647<br \/>\n\u0635\u0641\u062d\u0647 \u0628\u0647 \u0635\u0648\u0631\u062a \u067e\u0648\u06cc\u0627 \u0648 \u0628\u062f\u0648\u0646 \u0628\u0627\u0631\u06af\u06cc\u0631\u06cc \u0645\u062c\u062f\u062f \u0628\u0647 \u0631\u0648\u0632 \u0645\u06cc \u0634\u0648\u062f.<\/p>\n<p>  \u0645\u0631\u0627\u062d\u0644 \u0628\u0639\u062f\u06cc<\/p>\n<p>\u062f\u0631 \u0627\u06cc\u0646 \u0642\u0633\u0645\u062a \u0628\u0647 \u0627\u0635\u0648\u0644 \u0627\u0648\u0644\u06cc\u0647 \u067e\u0631\u062f\u0627\u062e\u062a\u06cc\u0645:<\/p>\n<p>React Router \u0686\u06cc\u0633\u062a \u0648 \u0686\u06af\u0648\u0646\u0647 \u06a9\u0627\u0631 \u0645\u06cc \u06a9\u0646\u062f.<br \/>\n\u0631\u0627\u0647 \u0627\u0646\u062f\u0627\u0632\u06cc BrowserRouter.<br \/>\n\u062a\u0639\u0631\u06cc\u0641 \u0645\u0633\u06cc\u0631\u0647\u0627 \u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 Routes \u0648 Route.<br \/>\n\u0627\u0641\u0632\u0648\u062f\u0646 \u067e\u06cc\u0645\u0627\u06cc\u0634 \u0628\u0627 Link \u0648 NavLink.<\/p>\n<p>\u062f\u0631 \u0645\u0642\u0627\u0644\u0647 \u0628\u0639\u062f\u06cc\u060c \u0628\u0631\u0631\u0633\u06cc \u0645\u06cc \u06a9\u0646\u06cc\u0645:<\/p>\n<p>\u0645\u0633\u06cc\u0631\u06cc\u0627\u0628\u06cc \u062a\u0648 \u062f\u0631 \u062a\u0648<br \/>\n\u0645\u0633\u06cc\u0631\u0647\u0627\u06cc \u067e\u0648\u06cc\u0627<br \/>\n\u0645\u062f\u06cc\u0631\u06cc\u062a \u067e\u0627\u0631\u0627\u0645\u062a\u0631\u0647\u0627\u06cc URL<\/p>\n<p>\u0645\u0646\u062a\u0638\u0631 \u0642\u0633\u0645\u062a \u0628\u0639\u062f\u06cc \u0627\u06cc\u0646 \u0645\u0637\u0644\u0628 \u0628\u0627\u0634\u06cc\u062f \u0631\u0627\u0647\u0646\u0645\u0627\u06cc \u0646\u0647\u0627\u06cc\u06cc \u0628\u0631\u0627\u06cc \u0631\u0648\u062a\u0631 React \u0633\u0631\u06cc\u0627\u0644!<\/p>\n<div data-article-id=\"2102941\" id=\"article-body\">\n<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_85 counter-hierarchy ez-toc-counter-rtl ez-toc-grey ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">\u0641\u0647\u0631\u0633\u062a \u0645\u0637\u0627\u0644\u0628<\/p>\n<span class=\"ez-toc-title-toggle\"><a href=\"#\" class=\"ez-toc-pull-right ez-toc-btn ez-toc-btn-xs ez-toc-btn-default ez-toc-toggle\" aria-label=\"\u062a\u063a\u06cc\u06cc\u0631 \u0648\u0636\u0639\u06cc\u062a \u0641\u0647\u0631\u0633\u062a \u0645\u0637\u0627\u0644\u0628\"><span class=\"ez-toc-js-icon-con\"><span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #999;color:#999\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #999;color:#999\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewBox=\"0 0 24 24\" version=\"1.2\" baseProfile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/span><\/a><\/span><\/div>\n<nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/nabfollower.com\/blog\/react-router-concepts-and-practical-guidepart-1-1i2f\/#%D8%B1%D8%A7%D9%87%D9%86%D9%85%D8%A7%DB%8C_%D9%86%D9%87%D8%A7%DB%8C%DB%8C_%D8%A8%D8%B1%D8%A7%DB%8C_%D8%B1%D9%88%D8%AA%D8%B1_%D9%88%D8%A7%DA%A9%D9%86%D8%B4_%D9%85%D9%81%D8%A7%D9%87%DB%8C%D9%85_%D9%88_%D8%B1%D8%A7%D9%87%D9%86%D9%85%D8%A7%DB%8C_%D8%B9%D9%85%D9%84%DB%8C\" >\u0631\u0627\u0647\u0646\u0645\u0627\u06cc \u0646\u0647\u0627\u06cc\u06cc \u0628\u0631\u0627\u06cc \u0631\u0648\u062a\u0631 \u0648\u0627\u06a9\u0646\u0634: \u0645\u0641\u0627\u0647\u06cc\u0645 \u0648 \u0631\u0627\u0647\u0646\u0645\u0627\u06cc \u0639\u0645\u0644\u06cc<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/nabfollower.com\/blog\/react-router-concepts-and-practical-guidepart-1-1i2f\/#%D9%85%D9%82%D8%AF%D9%85%D9%87\" >\u0645\u0642\u062f\u0645\u0647<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/nabfollower.com\/blog\/react-router-concepts-and-practical-guidepart-1-1i2f\/#%D8%B1%D9%88%D8%AA%D8%B1_React_%DA%86%DB%8C%D8%B3%D8%AA%D8%9F\" >\u0631\u0648\u062a\u0631 React \u0686\u06cc\u0633\u062a\u061f<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/nabfollower.com\/blog\/react-router-concepts-and-practical-guidepart-1-1i2f\/#%D9%88%DB%8C%DA%98%DA%AF%DB%8C_%D9%87%D8%A7%DB%8C_%DA%A9%D9%84%DB%8C%D8%AF%DB%8C_React_Router\" >\u0648\u06cc\u0698\u06af\u06cc \u0647\u0627\u06cc \u06a9\u0644\u06cc\u062f\u06cc React Router<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/nabfollower.com\/blog\/react-router-concepts-and-practical-guidepart-1-1i2f\/#%D9%86%D8%B5%D8%A8_%D8%B1%D9%88%D8%AA%D8%B1_React\" >\u0646\u0635\u0628 \u0631\u0648\u062a\u0631 React<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/nabfollower.com\/blog\/react-router-concepts-and-practical-guidepart-1-1i2f\/#%D9%85%D9%81%D8%A7%D9%87%DB%8C%D9%85_%D8%A7%D8%B5%D9%84%DB%8C_%D8%B1%D9%88%D8%AA%D8%B1_React\" >\u0645\u0641\u0627\u0647\u06cc\u0645 \u0627\u0635\u0644\u06cc \u0631\u0648\u062a\u0631 React<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-7\" href=\"https:\/\/nabfollower.com\/blog\/react-router-concepts-and-practical-guidepart-1-1i2f\/#1_BrowserRouter_%D9%88_%D8%A7%D8%AC%D8%B2%D8%A7%DB%8C_%D8%B1%D9%88%D8%AA%D8%B1\" >1. BrowserRouter \u0648 \u0627\u062c\u0632\u0627\u06cc \u0631\u0648\u062a\u0631<\/a><ul class='ez-toc-list-level-4' ><li class='ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-8\" href=\"https:\/\/nabfollower.com\/blog\/react-router-concepts-and-practical-guidepart-1-1i2f\/#%D9%86%DA%A9%D8%A7%D8%AA_%DA%A9%D9%84%DB%8C%D8%AF%DB%8C_%D8%AF%D8%B1_%D9%85%D9%88%D8%B1%D8%AF_BrowserRouter\" >\u0646\u06a9\u0627\u062a \u06a9\u0644\u06cc\u062f\u06cc \u062f\u0631 \u0645\u0648\u0631\u062f BrowserRouter<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-9\" href=\"https:\/\/nabfollower.com\/blog\/react-router-concepts-and-practical-guidepart-1-1i2f\/#%D9%86%D8%AD%D9%88%D9%87_%D8%A7%D8%B3%D8%AA%D9%81%D8%A7%D8%AF%D9%87_%D8%A7%D8%B2_BrowserRouter\" >\u0646\u062d\u0648\u0647 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 BrowserRouter<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-10\" href=\"https:\/\/nabfollower.com\/blog\/react-router-concepts-and-practical-guidepart-1-1i2f\/#2_%D9%85%D8%B3%DB%8C%D8%B1%D9%87%D8%A7_%D9%88_%D8%A7%D8%AC%D8%B2%D8%A7%DB%8C_%D9%85%D8%B3%DB%8C%D8%B1\" >2. \u0645\u0633\u06cc\u0631\u0647\u0627 \u0648 \u0627\u062c\u0632\u0627\u06cc \u0645\u0633\u06cc\u0631<\/a><ul class='ez-toc-list-level-4' ><li class='ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-11\" href=\"https:\/\/nabfollower.com\/blog\/react-router-concepts-and-practical-guidepart-1-1i2f\/#%D9%85%D8%B3%DB%8C%D8%B1%D9%87%D8%A7_%D9%88_%D8%A7%D8%AC%D8%B2%D8%A7%DB%8C_%D9%85%D8%B3%DB%8C%D8%B1_%DA%86%DB%8C%D8%B3%D8%AA%D8%9F\" >\u0645\u0633\u06cc\u0631\u0647\u0627 \u0648 \u0627\u062c\u0632\u0627\u06cc \u0645\u0633\u06cc\u0631 \u0686\u06cc\u0633\u062a\u061f<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-12\" href=\"https:\/\/nabfollower.com\/blog\/react-router-concepts-and-practical-guidepart-1-1i2f\/#%D9%85%D8%AB%D8%A7%D9%84_%D9%BE%D8%A7%DB%8C%D9%87\" >\u0645\u062b\u0627\u0644 \u067e\u0627\u06cc\u0647<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-13\" href=\"https:\/\/nabfollower.com\/blog\/react-router-concepts-and-practical-guidepart-1-1i2f\/#3_%D8%A7%D8%AC%D8%B2%D8%A7%DB%8C_%D9%BE%DB%8C%D9%88%D9%86%D8%AF_%D9%88_NavLink\" >3. \u0627\u062c\u0632\u0627\u06cc \u067e\u06cc\u0648\u0646\u062f \u0648 NavLink<\/a><ul class='ez-toc-list-level-4' ><li class='ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-14\" href=\"https:\/\/nabfollower.com\/blog\/react-router-concepts-and-practical-guidepart-1-1i2f\/#%D9%85%D8%A4%D9%84%D9%81%D9%87_%D9%BE%DB%8C%D9%88%D9%86%D8%AF\" >\u0645\u0624\u0644\u0641\u0647 \u067e\u06cc\u0648\u0646\u062f<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-15\" href=\"https:\/\/nabfollower.com\/blog\/react-router-concepts-and-practical-guidepart-1-1i2f\/#%D9%85%D8%A4%D9%84%D9%81%D9%87_NavLink\" >\u0645\u0624\u0644\u0641\u0647 NavLink<\/a><\/li><\/ul><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-16\" href=\"https:\/\/nabfollower.com\/blog\/react-router-concepts-and-practical-guidepart-1-1i2f\/#%D9%82%D8%B1%D8%A7%D8%B1_%D8%AF%D8%A7%D8%AF%D9%86_%D8%A2%D9%86_%D9%87%D9%85%D9%87_%D8%A8%D8%A7_%D9%87%D9%85\" >\u0642\u0631\u0627\u0631 \u062f\u0627\u062f\u0646 \u0622\u0646 \u0647\u0645\u0647 \u0628\u0627 \u0647\u0645<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-17\" href=\"https:\/\/nabfollower.com\/blog\/react-router-concepts-and-practical-guidepart-1-1i2f\/#%D8%AE%D8%B1%D9%88%D8%AC%DB%8C\" >\u062e\u0631\u0648\u062c\u06cc:<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-18\" href=\"https:\/\/nabfollower.com\/blog\/react-router-concepts-and-practical-guidepart-1-1i2f\/#%D9%85%D8%B1%D8%A7%D8%AD%D9%84_%D8%A8%D8%B9%D8%AF%DB%8C\" >\u0645\u0631\u0627\u062d\u0644 \u0628\u0639\u062f\u06cc<\/a><\/li><\/ul><\/nav><\/div>\n<h2><span class=\"ez-toc-section\" id=\"%D8%B1%D8%A7%D9%87%D9%86%D9%85%D8%A7%DB%8C_%D9%86%D9%87%D8%A7%DB%8C%DB%8C_%D8%A8%D8%B1%D8%A7%DB%8C_%D8%B1%D9%88%D8%AA%D8%B1_%D9%88%D8%A7%DA%A9%D9%86%D8%B4_%D9%85%D9%81%D8%A7%D9%87%DB%8C%D9%85_%D9%88_%D8%B1%D8%A7%D9%87%D9%86%D9%85%D8%A7%DB%8C_%D8%B9%D9%85%D9%84%DB%8C\"><\/span>\n<p>  <strong>\u0631\u0627\u0647\u0646\u0645\u0627\u06cc \u0646\u0647\u0627\u06cc\u06cc \u0628\u0631\u0627\u06cc \u0631\u0648\u062a\u0631 \u0648\u0627\u06a9\u0646\u0634: \u0645\u0641\u0627\u0647\u06cc\u0645 \u0648 \u0631\u0627\u0647\u0646\u0645\u0627\u06cc \u0639\u0645\u0644\u06cc<\/strong><br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<h2><span class=\"ez-toc-section\" id=\"%D9%85%D9%82%D8%AF%D9%85%D9%87\"><\/span>\n<p>  <strong>\u0645\u0642\u062f\u0645\u0647<\/strong><br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>\u0645\u0633\u06cc\u0631\u06cc\u0627\u0628\u06cc \u06cc\u06a9 \u0648\u06cc\u0698\u06af\u06cc \u0636\u0631\u0648\u0631\u06cc \u062f\u0631 \u0647\u0631 \u0628\u0631\u0646\u0627\u0645\u0647 \u0648\u0628 \u0645\u062f\u0631\u0646 \u0627\u0633\u062a. \u0627\u06cc\u0646 \u0628\u0647 \u06a9\u0627\u0631\u0628\u0631\u0627\u0646 \u0627\u062c\u0627\u0632\u0647 \u0645\u06cc \u062f\u0647\u062f \u062a\u0627 \u0628\u06cc\u0646 \u0628\u062e\u0634 \u0647\u0627 \u06cc\u0627 \u0635\u0641\u062d\u0627\u062a \u0645\u062e\u062a\u0644\u0641 \u0628\u0647 \u0637\u0648\u0631 \u06cc\u06a9\u067e\u0627\u0631\u0686\u0647 \u062d\u0631\u06a9\u062a \u06a9\u0646\u0646\u062f \u0648 \u062a\u062c\u0631\u0628\u0647 \u0627\u06cc \u0631\u0648\u0627\u0646 \u0648 \u062a\u0639\u0627\u0645\u0644\u06cc \u0627\u06cc\u062c\u0627\u062f \u06a9\u0646\u0646\u062f. \u062f\u0631 React\u060c \u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u0627\u06cc\u0646 \u0627\u0645\u0631 \u0628\u0647 \u062f\u0633\u062a \u0645\u06cc \u0622\u06cc\u062f <strong>\u0631\u0648\u062a\u0631 \u0648\u0627\u06a9\u0646\u0634<\/strong>\u060c \u06cc\u06a9 \u06a9\u062a\u0627\u0628\u062e\u0627\u0646\u0647 \u0642\u062f\u0631\u062a\u0645\u0646\u062f \u06a9\u0647 \u0628\u0631\u0627\u06cc \u0645\u062f\u06cc\u0631\u06cc\u062a \u0645\u0633\u06cc\u0631\u06cc\u0627\u0628\u06cc \u062f\u0631 \u0628\u0631\u0646\u0627\u0645\u0647 \u0647\u0627\u06cc \u06a9\u0627\u0631\u0628\u0631\u062f\u06cc \u06cc\u06a9 \u0635\u0641\u062d\u0647 (SPA) \u0637\u0631\u0627\u062d\u06cc \u0634\u062f\u0647 \u0627\u0633\u062a.<\/p>\n<p>React Router \u0641\u0631\u0622\u06cc\u0646\u062f \u0627\u06cc\u062c\u0627\u062f \u0645\u0633\u06cc\u0631\u0647\u0627\u06cc \u067e\u0648\u06cc\u0627 \u0648 \u062a\u0648\u062f\u0631\u062a\u0648\u060c \u0645\u062f\u06cc\u0631\u06cc\u062a \u067e\u0627\u0631\u0627\u0645\u062a\u0631\u0647\u0627\u06cc URL\u060c \u067e\u06cc\u0627\u062f\u0647 \u0633\u0627\u0632\u06cc \u0645\u0633\u06cc\u0631\u0647\u0627\u06cc \u0645\u062d\u0627\u0641\u0638\u062a \u0634\u062f\u0647 \u0648 \u0645\u0648\u0627\u0631\u062f \u062f\u06cc\u06af\u0631 \u0631\u0627 \u0633\u0627\u062f\u0647 \u0645\u06cc \u06a9\u0646\u062f. \u062f\u0631 \u0627\u06cc\u0646 \u0631\u0627\u0647\u0646\u0645\u0627\u06cc \u062c\u0627\u0645\u0639\u060c \u062a\u0645\u0627\u0645 \u062c\u0646\u0628\u0647\u200c\u0647\u0627\u06cc React Router \u0631\u0627 \u0628\u0631\u0631\u0633\u06cc \u0645\u06cc\u200c\u06a9\u0646\u06cc\u0645\u060c \u0645\u0641\u0627\u0647\u06cc\u0645 \u0622\u0646 \u0631\u0627 \u06af\u0627\u0645 \u0628\u0647 \u06af\u0627\u0645 \u062a\u062c\u0632\u06cc\u0647 \u0645\u06cc\u200c\u06a9\u0646\u06cc\u0645 \u0648 \u0622\u0646\u0647\u0627 \u0631\u0627 \u0628\u0627 \u0645\u062b\u0627\u0644\u200c\u0647\u0627\u06cc \u0639\u0645\u0644\u06cc \u067e\u06cc\u0627\u062f\u0647\u200c\u0633\u0627\u0632\u06cc \u0645\u06cc\u200c\u06a9\u0646\u06cc\u0645.<\/p>\n<hr\/>\n<h2><span class=\"ez-toc-section\" id=\"%D8%B1%D9%88%D8%AA%D8%B1_React_%DA%86%DB%8C%D8%B3%D8%AA%D8%9F\"><\/span>\n<p>  <strong>\u0631\u0648\u062a\u0631 React \u0686\u06cc\u0633\u062a\u061f<\/strong><br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>React Router \u06cc\u06a9 \u06a9\u062a\u0627\u0628\u062e\u0627\u0646\u0647 \u0627\u0639\u0644\u0627\u0645\u06cc \u0648 \u0645\u0628\u062a\u0646\u06cc \u0628\u0631 \u0645\u0624\u0644\u0641\u0647 \u0628\u0631\u0627\u06cc \u0645\u062f\u06cc\u0631\u06cc\u062a \u0645\u0633\u06cc\u0631\u06cc\u0627\u0628\u06cc \u062f\u0631 \u0628\u0631\u0646\u0627\u0645\u0647 \u0647\u0627\u06cc React \u0627\u0633\u062a. \u0627\u0632 \u06cc\u06a9 \u0631\u0648\u06cc\u06a9\u0631\u062f \u0645\u062f\u0631\u0646 \u0628\u0631\u0627\u06cc \u0646\u06af\u0627\u0634\u062a URL \u0647\u0627 \u0628\u0647 \u0627\u062c\u0632\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0645\u06cc \u06a9\u0646\u062f \u0648 \u0628\u0647 \u062a\u0648\u0633\u0639\u0647 \u062f\u0647\u0646\u062f\u06af\u0627\u0646 \u0627\u06cc\u0646 \u0627\u0645\u06a9\u0627\u0646 \u0631\u0627 \u0645\u06cc \u062f\u0647\u062f \u062a\u0627 SPA \u0647\u0627\u06cc \u0645\u0642\u06cc\u0627\u0633 \u067e\u0630\u06cc\u0631 \u0648 \u067e\u0648\u06cc\u0627 \u0631\u0627 \u0628\u0647 \u0631\u0627\u062d\u062a\u06cc \u0628\u0633\u0627\u0632\u0646\u062f.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"%D9%88%DB%8C%DA%98%DA%AF%DB%8C_%D9%87%D8%A7%DB%8C_%DA%A9%D9%84%DB%8C%D8%AF%DB%8C_React_Router\"><\/span>\n<p>  <strong>\u0648\u06cc\u0698\u06af\u06cc \u0647\u0627\u06cc \u06a9\u0644\u06cc\u062f\u06cc React Router<\/strong><br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<ol>\n<li>\n<strong>\u0645\u0633\u06cc\u0631\u06cc\u0627\u0628\u06cc \u0627\u0639\u0644\u0627\u0645\u06cc<\/strong>: \u0645\u0633\u06cc\u0631\u0647\u0627 \u0631\u0627 \u0628\u0647 \u0639\u0646\u0648\u0627\u0646 \u0627\u062c\u0632\u0627\u0621 \u062a\u0639\u0631\u06cc\u0641 \u06a9\u0646\u06cc\u062f \u06a9\u0647 \u062f\u0631\u06a9 \u0648 \u0646\u06af\u0647\u062f\u0627\u0631\u06cc \u0633\u06cc\u0633\u062a\u0645 \u0645\u0633\u06cc\u0631\u06cc\u0627\u0628\u06cc \u0631\u0627 \u0622\u0633\u0627\u0646 \u0645\u06cc \u06a9\u0646\u062f.<\/li>\n<li>\n<strong>\u0645\u0633\u06cc\u0631\u06cc\u0627\u0628\u06cc \u067e\u0648\u06cc\u0627<\/strong>: \u06a9\u0646\u062a\u0631\u0644 \u067e\u0627\u0631\u0627\u0645\u062a\u0631\u0647\u0627\u06cc \u067e\u0648\u06cc\u0627 \u062f\u0631 URL \u0647\u0627\u06cc\u06cc \u0645\u0627\u0646\u0646\u062f <code>\/user\/:id<\/code> \u0628\u0631\u0627\u06cc \u0627\u06cc\u062c\u0627\u062f \u0645\u0633\u06cc\u0631\u0647\u0627\u06cc \u0627\u0646\u0639\u0637\u0627\u0641 \u067e\u0630\u06cc\u0631 \u0648 \u0642\u0627\u0628\u0644 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0645\u062c\u062f\u062f.<\/li>\n<li>\n<strong>\u0645\u0633\u06cc\u0631\u0647\u0627\u06cc \u062a\u0648 \u062f\u0631 \u062a\u0648<\/strong>: \u0645\u0633\u06cc\u0631\u0647\u0627\u06cc \u062e\u0648\u062f \u0631\u0627 \u0628\u0647 \u0635\u0648\u0631\u062a \u0633\u0644\u0633\u0644\u0647 \u0645\u0631\u0627\u062a\u0628\u06cc \u0633\u0627\u0632\u0645\u0627\u0646\u062f\u0647\u06cc \u06a9\u0646\u06cc\u062f \u0648 \u0631\u0648\u0627\u0628\u0637 \u0648\u0627\u0644\u062f\u06cc\u0646 \u0648 \u0641\u0631\u0632\u0646\u062f \u0631\u0627 \u0641\u0639\u0627\u0644 \u06a9\u0646\u06cc\u062f.<\/li>\n<li>\n<strong>\u0645\u0633\u06cc\u0631\u0647\u0627\u06cc \u0645\u062d\u0627\u0641\u0638\u062a \u0634\u062f\u0647<\/strong>: \u0645\u0633\u06cc\u0631\u0647\u0627\u06cc \u062e\u0627\u0635 \u0631\u0627 \u062f\u0631 \u067e\u0634\u062a \u0627\u062d\u0631\u0627\u0632 \u0647\u0648\u06cc\u062a \u06cc\u0627 \u0645\u062c\u0648\u0632 \u0627\u06cc\u0645\u0646 \u06a9\u0646\u06cc\u062f.<\/li>\n<li>\n<strong>\u0646\u0627\u0648\u0628\u0631\u06cc \u0628\u0631\u0646\u0627\u0645\u0647 \u0627\u06cc<\/strong>: \u0628\u06cc\u0646 \u0635\u0641\u062d\u0627\u062a \u0628\u0647 \u0635\u0648\u0631\u062a \u0628\u0631\u0646\u0627\u0645\u0647 \u0646\u0648\u06cc\u0633\u06cc \u0628\u0631 \u0627\u0633\u0627\u0633 \u0627\u0642\u062f\u0627\u0645\u0627\u062a \u06a9\u0627\u0631\u0628\u0631 \u067e\u06cc\u0645\u0627\u06cc\u0634 \u06a9\u0646\u06cc\u062f.<\/li>\n<li>\n<strong>\u067e\u0634\u062a\u06cc\u0628\u0627\u0646\u06cc \u0627\u0632 \u062a\u0627\u0631\u06cc\u062e\u0686\u0647 \u0645\u0631\u0648\u0631\u06af\u0631<\/strong>: \u0628\u0627 \u067e\u06cc\u0645\u0627\u06cc\u0634 \u0645\u0631\u0648\u0631\u06af\u0631\u060c \u0627\u0632 \u062c\u0645\u0644\u0647 \u0627\u0642\u062f\u0627\u0645\u0627\u062a \u0631\u0648 \u0628\u0647 \u062c\u0644\u0648\u060c \u0639\u0642\u0628 \u0648 \u062a\u0627\u0632\u0647 \u06a9\u0631\u062f\u0646 \u0647\u0645\u06af\u0627\u0645 \u0633\u0627\u0632\u06cc \u06a9\u0646\u06cc\u062f.<\/li>\n<\/ol>\n<hr\/>\n<h2><span class=\"ez-toc-section\" id=\"%D9%86%D8%B5%D8%A8_%D8%B1%D9%88%D8%AA%D8%B1_React\"><\/span>\n<p>  <strong>\u0646\u0635\u0628 \u0631\u0648\u062a\u0631 React<\/strong><br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>\u0642\u0628\u0644 \u0627\u0632 \u0634\u0631\u0648\u0639\u060c \u0627\u062c\u0627\u0632\u0647 \u062f\u0647\u06cc\u062f React Router \u0631\u0627 \u062f\u0631 \u067e\u0631\u0648\u0698\u0647 \u062e\u0648\u062f \u0631\u0627\u0647 \u0627\u0646\u062f\u0627\u0632\u06cc \u06a9\u0646\u06cc\u0645. \u06a9\u062a\u0627\u0628\u062e\u0627\u0646\u0647 \u0631\u0627 \u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 npm \u06cc\u0627 yarn \u0646\u0635\u0628 \u06a9\u0646\u06cc\u062f:<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight shell\"><code><span class=\"c\"># Using npm<\/span>\nnpm <span class=\"nb\">install <\/span>react-router-dom\n\n<span class=\"c\"># Using yarn<\/span>\nyarn add react-router-dom\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<p>\u067e\u0633 \u0627\u0632 \u0646\u0635\u0628\u060c \u0622\u0645\u0627\u062f\u0647 \u0627\u062f\u063a\u0627\u0645 React Router \u062f\u0631 \u0628\u0631\u0646\u0627\u0645\u0647 \u062e\u0648\u062f \u0647\u0633\u062a\u06cc\u062f.<\/p>\n<hr\/>\n<h2><span class=\"ez-toc-section\" id=\"%D9%85%D9%81%D8%A7%D9%87%DB%8C%D9%85_%D8%A7%D8%B5%D9%84%DB%8C_%D8%B1%D9%88%D8%AA%D8%B1_React\"><\/span>\n<p>  <strong>\u0645\u0641\u0627\u0647\u06cc\u0645 \u0627\u0635\u0644\u06cc \u0631\u0648\u062a\u0631 React<\/strong><br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>React Router \u062d\u0648\u0644 \u0686\u0646\u062f \u0645\u0641\u0647\u0648\u0645 \u0627\u0635\u0644\u06cc \u0645\u06cc \u0686\u0631\u062e\u062f \u200b\u200b\u06a9\u0647 \u067e\u0627\u06cc\u0647 \u0648 \u0627\u0633\u0627\u0633 \u0633\u06cc\u0633\u062a\u0645 \u0645\u0633\u06cc\u0631\u06cc\u0627\u0628\u06cc \u0622\u0646 \u0631\u0627 \u062a\u0634\u06a9\u06cc\u0644 \u0645\u06cc \u062f\u0647\u0646\u062f. \u0628\u06cc\u0627\u06cc\u06cc\u062f \u0622\u0646\u0647\u0627 \u0631\u0627 \u0645\u0631\u062d\u0644\u0647 \u0628\u0647 \u0645\u0631\u062d\u0644\u0647 \u062a\u062c\u0632\u06cc\u0647 \u06a9\u0646\u06cc\u0645.<\/p>\n<hr\/>\n<h3><span class=\"ez-toc-section\" id=\"1_BrowserRouter_%D9%88_%D8%A7%D8%AC%D8%B2%D8%A7%DB%8C_%D8%B1%D9%88%D8%AA%D8%B1\"><\/span>\n<p>  <strong>1. BrowserRouter \u0648 \u0627\u062c\u0632\u0627\u06cc \u0631\u0648\u062a\u0631<\/strong><br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>\u062f\u0631 \u0633\u0637\u062d \u0628\u0627\u0644\u0627\u06cc \u0628\u0631\u0646\u0627\u0645\u0647 React \u062e\u0648\u062f\u060c \u0628\u0627\u06cc\u062f \u0647\u0645\u0647 \u0686\u06cc\u0632 \u0631\u0627 \u062f\u0627\u062e\u0644 a \u0628\u067e\u06cc\u0686\u06cc\u062f <strong>\u0631\u0648\u062a\u0631<\/strong>. \u0631\u0648\u062a\u0631 React \u0627\u0646\u0648\u0627\u0639 \u0645\u062e\u062a\u0644\u0641\u06cc \u0627\u0632 \u0631\u0648\u062a\u0631\u0647\u0627 \u0631\u0627 \u0627\u0631\u0627\u0626\u0647 \u0645\u06cc \u062f\u0647\u062f\u060c \u0627\u0645\u0627 \u0631\u0627\u06cc\u062c \u062a\u0631\u06cc\u0646 \u0622\u0646\u0647\u0627 \u0627\u0633\u062a <strong><code>BrowserRouter<\/code><\/strong>\u060c \u06a9\u0647 \u0627\u0632 API \u062a\u0627\u0631\u06cc\u062e\u0686\u0647 \u0645\u0631\u0648\u0631\u06af\u0631 \u0628\u0631\u0627\u06cc \u0645\u062f\u06cc\u0631\u06cc\u062a \u067e\u06cc\u0645\u0627\u06cc\u0634 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0645\u06cc \u06a9\u0646\u062f.<\/p>\n<h4><span class=\"ez-toc-section\" id=\"%D9%86%DA%A9%D8%A7%D8%AA_%DA%A9%D9%84%DB%8C%D8%AF%DB%8C_%D8%AF%D8%B1_%D9%85%D9%88%D8%B1%D8%AF_BrowserRouter\"><\/span>\n<p>  <strong>\u0646\u06a9\u0627\u062a \u06a9\u0644\u06cc\u062f\u06cc \u062f\u0631 \u0645\u0648\u0631\u062f BrowserRouter<\/strong><br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h4>\n<ul>\n<li>\u0632\u0645\u06cc\u0646\u0647 \u0645\u0648\u0631\u062f \u0646\u06cc\u0627\u0632 \u0628\u0631\u0627\u06cc \u0645\u0633\u06cc\u0631\u06cc\u0627\u0628\u06cc \u0631\u0627 \u0641\u0631\u0627\u0647\u0645 \u0645\u06cc \u06a9\u0646\u062f.<\/li>\n<li>\u0628\u0647 \u062a\u063a\u06cc\u06cc\u0631\u0627\u062a URL \u0645\u0631\u0648\u0631\u06af\u0631 \u06af\u0648\u0634 \u0645\u06cc \u062f\u0647\u062f \u0648 \u0627\u062c\u0632\u0627\u06cc \u0622\u0646 \u0631\u0627 \u0645\u062c\u062f\u062f\u0627\u064b \u0627\u0631\u0627\u0626\u0647 \u0645\u06cc \u062f\u0647\u062f.<\/li>\n<li>\u0627\u0646\u0648\u0627\u0639 \u062f\u06cc\u06af\u0631 \u0631\u0648\u062a\u0631\u0647\u0627 \u0645\u0627\u0646\u0646\u062f <strong><code>HashRouter<\/code><\/strong>\u060c \u0627\u0632 \u0647\u0634 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u06a9\u0646\u06cc\u062f (<code>#<\/code>) \u062f\u0631 URL \u0628\u0631\u0627\u06cc \u067e\u06cc\u0645\u0627\u06cc\u0634\u060c \u0627\u0645\u0627 <code>BrowserRouter<\/code> \u0628\u06cc\u0634\u062a\u0631 \u062f\u0631 \u06a9\u0627\u0631\u0628\u0631\u062f\u0647\u0627\u06cc \u0645\u062f\u0631\u0646 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0645\u06cc \u0634\u0648\u062f.<\/li>\n<\/ul>\n<h4><span class=\"ez-toc-section\" id=\"%D9%86%D8%AD%D9%88%D9%87_%D8%A7%D8%B3%D8%AA%D9%81%D8%A7%D8%AF%D9%87_%D8%A7%D8%B2_BrowserRouter\"><\/span>\n<p>  <strong>\u0646\u062d\u0648\u0647 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 BrowserRouter<\/strong><br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h4>\n<p>\u062f\u0631 \u0627\u06cc\u0646\u062c\u0627 \u06cc\u06a9 \u0645\u062b\u0627\u0644 \u0627\u0633\u0627\u0633\u06cc \u0627\u0632 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0633\u062a <code>BrowserRouter<\/code>:<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight jsx\"><code><span class=\"k\">import<\/span> <span class=\"nx\">React<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">react<\/span><span class=\"dl\">\"<\/span><span class=\"p\">;<\/span>\n<span class=\"k\">import<\/span> <span class=\"p\">{<\/span> <span class=\"nx\">BrowserRouter<\/span> <span class=\"p\">}<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">react-router-dom<\/span><span class=\"dl\">\"<\/span><span class=\"p\">;<\/span>\n\n<span class=\"kd\">function<\/span> <span class=\"nf\">App<\/span><span class=\"p\">()<\/span> <span class=\"p\">{<\/span>\n    <span class=\"k\">return <\/span><span class=\"p\">(<\/span>\n        <span class=\"p\">&lt;<\/span><span class=\"nc\">BrowserRouter<\/span><span class=\"p\">&gt;<\/span>\n            <span class=\"p\">&lt;<\/span><span class=\"nt\">div<\/span><span class=\"p\">&gt;<\/span>\n                <span class=\"p\">&lt;<\/span><span class=\"nt\">h1<\/span><span class=\"p\">&gt;<\/span>Welcome to My App<span class=\"p\"\/><span class=\"nt\">h1<\/span><span class=\"p\">&gt;<\/span>\n                <span class=\"p\">&lt;<\/span><span class=\"nt\">p<\/span><span class=\"p\">&gt;<\/span>Routing starts here!<span class=\"p\"\/><span class=\"nt\">p<\/span><span class=\"p\">&gt;<\/span>\n            <span class=\"p\"\/><span class=\"nt\">div<\/span><span class=\"p\">&gt;<\/span>\n        <span class=\"p\"\/><span class=\"nc\">BrowserRouter<\/span><span class=\"p\">&gt;<\/span>\n    <span class=\"p\">);<\/span>\n<span class=\"p\">}<\/span>\n\n<span class=\"k\">export<\/span> <span class=\"k\">default<\/span> <span class=\"nx\">App<\/span><span class=\"p\">;<\/span>\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<p><strong>\u062a\u0648\u0636\u06cc\u062d<\/strong>:<\/p>\n<ul>\n<li>\u0645\u0627 \u0648\u0627\u0631\u062f \u0645\u06cc \u06a9\u0646\u06cc\u0645 <code>BrowserRouter<\/code> \u0627\u0632 <code>react-router-dom<\/code>.<\/li>\n<li>\u0627\u06cc\u0646 <code>BrowserRouter<\/code> \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a \u06a9\u0644 \u0628\u0631\u0646\u0627\u0645\u0647 \u0631\u0627 \u0645\u06cc \u067e\u06cc\u0686\u062f \u062a\u0627 \u0639\u0645\u0644\u06a9\u0631\u062f \u0645\u0633\u06cc\u0631\u06cc\u0627\u0628\u06cc \u0631\u0627 \u0641\u0639\u0627\u0644 \u06a9\u0646\u062f.<\/li>\n<\/ul>\n<blockquote>\n<p><strong>\u062a\u0648\u062c\u0647 \u062f\u0627\u0634\u062a\u0647 \u0628\u0627\u0634\u06cc\u062f<\/strong>: \u0634\u0645\u0627 \u0641\u0642\u0637 \u0645\u06cc \u062a\u0648\u0627\u0646\u06cc\u062f \u06cc\u06a9\u06cc \u062f\u0627\u0634\u062a\u0647 \u0628\u0627\u0634\u06cc\u062f <code>BrowserRouter<\/code> \u062f\u0631 \u0631\u06cc\u0634\u0647 \u0628\u0631\u0646\u0627\u0645\u0647 \u0634\u0645\u0627.<\/p>\n<\/blockquote>\n<hr\/>\n<h3><span class=\"ez-toc-section\" id=\"2_%D9%85%D8%B3%DB%8C%D8%B1%D9%87%D8%A7_%D9%88_%D8%A7%D8%AC%D8%B2%D8%A7%DB%8C_%D9%85%D8%B3%DB%8C%D8%B1\"><\/span>\n<p>  <strong>2. \u0645\u0633\u06cc\u0631\u0647\u0627 \u0648 \u0627\u062c\u0632\u0627\u06cc \u0645\u0633\u06cc\u0631<\/strong><br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>\u067e\u0633 \u0627\u0632 \u0628\u0633\u062a\u0647 \u0628\u0646\u062f\u06cc \u0628\u0631\u0646\u0627\u0645\u0647 \u062e\u0648\u062f \u0628\u0627 <code>BrowserRouter<\/code>\u060c \u0645\u0633\u06cc\u0631\u0647\u0627\u06cc \u0641\u0631\u062f\u06cc \u0631\u0627 \u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 <strong><code>Routes<\/code><\/strong>  \u0648 <strong><code>Route<\/code><\/strong>  \u0627\u062c\u0632\u0627\u0621 <\/p>\n<h4><span class=\"ez-toc-section\" id=\"%D9%85%D8%B3%DB%8C%D8%B1%D9%87%D8%A7_%D9%88_%D8%A7%D8%AC%D8%B2%D8%A7%DB%8C_%D9%85%D8%B3%DB%8C%D8%B1_%DA%86%DB%8C%D8%B3%D8%AA%D8%9F\"><\/span>\n<p>  <strong>\u0645\u0633\u06cc\u0631\u0647\u0627 \u0648 \u0627\u062c\u0632\u0627\u06cc \u0645\u0633\u06cc\u0631 \u0686\u06cc\u0633\u062a\u061f<\/strong><br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h4>\n<ul>\n<li>\n<strong><code>Routes<\/code><\/strong>: \u0645\u062d\u0641\u0638\u0647 \u0627\u06cc \u0628\u0631\u0627\u06cc \u062a\u0645\u0627\u0645 \u0645\u0633\u06cc\u0631\u0647\u0627\u06cc \u0628\u0631\u0646\u0627\u0645\u0647 \u0634\u0645\u0627.<\/li>\n<li>\n<strong><code>Route<\/code><\/strong>: \u06cc\u06a9 \u0645\u0633\u06cc\u0631 \u0648\u0627\u062d\u062f \u0631\u0627 \u0646\u0634\u0627\u0646 \u0645\u06cc \u062f\u0647\u062f \u0648 \u062a\u0639\u0631\u06cc\u0641 \u0645\u06cc \u06a9\u0646\u062f:<\/p>\n<ul>\n<li>\n<strong><code>path<\/code><\/strong>: \u0645\u0633\u06cc\u0631 URL \u0628\u0631\u0627\u06cc \u0645\u0637\u0627\u0628\u0642\u062a.<\/li>\n<li>\n<strong><code>element<\/code><\/strong>: \u0645\u0624\u0644\u0641\u0647 React \u0628\u0631\u0627\u06cc \u0631\u0646\u062f\u0631 \u062f\u0631 \u0635\u0648\u0631\u062a \u0645\u0637\u0627\u0628\u0642\u062a \u0645\u0633\u06cc\u0631.<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<h4><span class=\"ez-toc-section\" id=\"%D9%85%D8%AB%D8%A7%D9%84_%D9%BE%D8%A7%DB%8C%D9%87\"><\/span>\n<p>  <strong>\u0645\u062b\u0627\u0644 \u067e\u0627\u06cc\u0647<\/strong><br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h4>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight jsx\"><code><span class=\"k\">import<\/span> <span class=\"nx\">React<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">react<\/span><span class=\"dl\">\"<\/span><span class=\"p\">;<\/span>\n<span class=\"k\">import<\/span> <span class=\"p\">{<\/span> <span class=\"nx\">BrowserRouter<\/span><span class=\"p\">,<\/span> <span class=\"nx\">Routes<\/span><span class=\"p\">,<\/span> <span class=\"nx\">Route<\/span> <span class=\"p\">}<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">react-router-dom<\/span><span class=\"dl\">\"<\/span><span class=\"p\">;<\/span>\n\n<span class=\"kd\">function<\/span> <span class=\"nf\">Home<\/span><span class=\"p\">()<\/span> <span class=\"p\">{<\/span>\n    <span class=\"k\">return<\/span> <span class=\"p\">&lt;<\/span><span class=\"nt\">h1<\/span><span class=\"p\">&gt;<\/span>Home Page<span class=\"p\"\/><span class=\"nt\">h1<\/span><span class=\"p\">&gt;;<\/span>\n<span class=\"p\">}<\/span>\n\n<span class=\"kd\">function<\/span> <span class=\"nf\">About<\/span><span class=\"p\">()<\/span> <span class=\"p\">{<\/span>\n    <span class=\"k\">return<\/span> <span class=\"p\">&lt;<\/span><span class=\"nt\">h1<\/span><span class=\"p\">&gt;<\/span>About Page<span class=\"p\"\/><span class=\"nt\">h1<\/span><span class=\"p\">&gt;;<\/span>\n<span class=\"p\">}<\/span>\n\n<span class=\"kd\">function<\/span> <span class=\"nf\">App<\/span><span class=\"p\">()<\/span> <span class=\"p\">{<\/span>\n    <span class=\"k\">return <\/span><span class=\"p\">(<\/span>\n        <span class=\"p\">&lt;<\/span><span class=\"nc\">BrowserRouter<\/span><span class=\"p\">&gt;<\/span>\n            <span class=\"p\">&lt;<\/span><span class=\"nc\">Routes<\/span><span class=\"p\">&gt;<\/span>\n                <span class=\"p\">&lt;<\/span><span class=\"nc\">Route<\/span> <span class=\"na\">path<\/span><span class=\"p\">=<\/span><span class=\"s\">\"https:\/\/dev.to\/\"<\/span> <span class=\"na\">element<\/span><span class=\"p\">=<\/span><span class=\"si\">{<\/span><span class=\"p\">&lt;<\/span><span class=\"nc\">Home<\/span> <span class=\"p\">\/&gt;<\/span><span class=\"si\">}<\/span> <span class=\"p\">\/&gt;<\/span>\n                <span class=\"p\">&lt;<\/span><span class=\"nc\">Route<\/span> <span class=\"na\">path<\/span><span class=\"p\">=<\/span><span class=\"s\">\"https:\/\/dev.to\/about\"<\/span> <span class=\"na\">element<\/span><span class=\"p\">=<\/span><span class=\"si\">{<\/span><span class=\"p\">&lt;<\/span><span class=\"nc\">About<\/span> <span class=\"p\">\/&gt;<\/span><span class=\"si\">}<\/span> <span class=\"p\">\/&gt;<\/span>\n            <span class=\"p\"\/><span class=\"nc\">Routes<\/span><span class=\"p\">&gt;<\/span>\n        <span class=\"p\"\/><span class=\"nc\">BrowserRouter<\/span><span class=\"p\">&gt;<\/span>\n    <span class=\"p\">);<\/span>\n<span class=\"p\">}<\/span>\n\n<span class=\"k\">export<\/span> <span class=\"k\">default<\/span> <span class=\"nx\">App<\/span><span class=\"p\">;<\/span>\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<p><strong>\u062a\u0648\u0636\u06cc\u062d<\/strong>:<\/p>\n<ol>\n<li>\n<strong><code>path=\"https:\/\/dev.to\/\"<\/code><\/strong>: \u0627\u06cc\u0646 \u0645\u0633\u06cc\u0631 \u0628\u0627 URL \u0631\u06cc\u0634\u0647 \u0645\u0637\u0627\u0628\u0642\u062a \u062f\u0627\u0631\u062f (<code>\/<\/code>) \u0648 \u0631\u0646\u062f\u0631 \u0645\u06cc \u06a9\u0646\u062f <code>Home<\/code> \u062c\u0632\u0621<\/li>\n<li>\n<strong><code>path=\"https:\/\/dev.to\/about\"<\/code><\/strong>: \u0645\u0633\u0627\u0628\u0642\u0627\u062a <code>\/about<\/code> \u0648 \u0631\u0646\u062f\u0631 \u0645\u06cc \u06a9\u0646\u062f <code>About<\/code> \u062c\u0632\u0621<\/li>\n<li>\u0647\u0646\u06af\u0627\u0645\u06cc \u06a9\u0647 URL \u062a\u063a\u06cc\u06cc\u0631 \u0645\u06cc \u06a9\u0646\u062f (\u0628\u0647 \u0639\u0646\u0648\u0627\u0646 \u0645\u062b\u0627\u0644\u060c <code>\/about<\/code>) React Router \u0628\u0647 \u0637\u0648\u0631 \u062e\u0648\u062f\u06a9\u0627\u0631 \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a \u0645\u0631\u0628\u0648\u0637\u0647 \u0631\u0627 \u0631\u0646\u062f\u0631 \u0645\u06cc \u06a9\u0646\u062f.<\/li>\n<\/ol>\n<hr\/>\n<h3><span class=\"ez-toc-section\" id=\"3_%D8%A7%D8%AC%D8%B2%D8%A7%DB%8C_%D9%BE%DB%8C%D9%88%D9%86%D8%AF_%D9%88_NavLink\"><\/span>\n<p>  <strong>3. \u0627\u062c\u0632\u0627\u06cc \u067e\u06cc\u0648\u0646\u062f \u0648 NavLink<\/strong><br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>\u062f\u0631 \u06cc\u06a9 \u0628\u0631\u0646\u0627\u0645\u0647 React \u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u0633\u0646\u062a\u06cc <code><a\/><\/code> \u0628\u0631\u0686\u0633\u0628\u200c\u0647\u0627 \u0628\u0631\u0627\u06cc \u067e\u06cc\u0645\u0627\u06cc\u0634 \u0628\u0627\u0639\u062b \u0645\u06cc\u200c\u0634\u0648\u0646\u062f \u0645\u0631\u0648\u0631\u06af\u0631 \u0635\u0641\u062d\u0647 \u0631\u0627 \u062f\u0648\u0628\u0627\u0631\u0647 \u0628\u0627\u0631\u06af\u06cc\u0631\u06cc \u06a9\u0646\u062f. \u0631\u0648\u062a\u0631 React \u0641\u0631\u0627\u0647\u0645 \u0645\u06cc \u06a9\u0646\u062f <strong><code>Link<\/code><\/strong>  \u0648 <strong><code>NavLink<\/code><\/strong>  \u0645\u0648\u0644\u0641\u0647 \u0647\u0627\u06cc\u06cc \u0628\u0631\u0627\u06cc \u067e\u06cc\u0645\u0627\u06cc\u0634 \u06cc\u06a9\u067e\u0627\u0631\u0686\u0647 \u0628\u062f\u0648\u0646 \u0628\u0627\u0632\u062e\u0648\u0627\u0646\u06cc \u0635\u0641\u062d\u0647.<\/p>\n<h4><span class=\"ez-toc-section\" id=\"%D9%85%D8%A4%D9%84%D9%81%D9%87_%D9%BE%DB%8C%D9%88%D9%86%D8%AF\"><\/span>\n<p>  <strong>\u0645\u0624\u0644\u0641\u0647 \u067e\u06cc\u0648\u0646\u062f<\/strong><br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h4>\n<p>\u0627\u06cc\u0646 <code>Link<\/code> \u0645\u0624\u0644\u0641\u0647 \u0628\u0647 \u0634\u0645\u0627 \u0627\u0645\u06a9\u0627\u0646 \u0645\u06cc \u062f\u0647\u062f \u0628\u0627 \u0628\u0647 \u0631\u0648\u0632 \u0631\u0633\u0627\u0646\u06cc URL \u0628\u062f\u0648\u0646 \u0628\u0627\u0631\u06af\u06cc\u0631\u06cc \u0645\u062c\u062f\u062f \u0635\u0641\u062d\u0647\u060c \u0628\u06cc\u0646 \u0645\u0633\u06cc\u0631\u0647\u0627 \u062d\u0631\u06a9\u062a \u06a9\u0646\u06cc\u062f.<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight jsx\"><code><span class=\"k\">import<\/span> <span class=\"nx\">React<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">react<\/span><span class=\"dl\">\"<\/span><span class=\"p\">;<\/span>\n<span class=\"k\">import<\/span> <span class=\"p\">{<\/span> <span class=\"nx\">BrowserRouter<\/span><span class=\"p\">,<\/span> <span class=\"nx\">Routes<\/span><span class=\"p\">,<\/span> <span class=\"nx\">Route<\/span><span class=\"p\">,<\/span> <span class=\"nx\">Link<\/span> <span class=\"p\">}<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">react-router-dom<\/span><span class=\"dl\">\"<\/span><span class=\"p\">;<\/span>\n\n<span class=\"kd\">function<\/span> <span class=\"nf\">Home<\/span><span class=\"p\">()<\/span> <span class=\"p\">{<\/span>\n    <span class=\"k\">return<\/span> <span class=\"p\">&lt;<\/span><span class=\"nt\">h1<\/span><span class=\"p\">&gt;<\/span>Home Page<span class=\"p\"\/><span class=\"nt\">h1<\/span><span class=\"p\">&gt;;<\/span>\n<span class=\"p\">}<\/span>\n\n<span class=\"kd\">function<\/span> <span class=\"nf\">About<\/span><span class=\"p\">()<\/span> <span class=\"p\">{<\/span>\n    <span class=\"k\">return<\/span> <span class=\"p\">&lt;<\/span><span class=\"nt\">h1<\/span><span class=\"p\">&gt;<\/span>About Page<span class=\"p\"\/><span class=\"nt\">h1<\/span><span class=\"p\">&gt;;<\/span>\n<span class=\"p\">}<\/span>\n\n<span class=\"kd\">function<\/span> <span class=\"nf\">Navbar<\/span><span class=\"p\">()<\/span> <span class=\"p\">{<\/span>\n    <span class=\"k\">return <\/span><span class=\"p\">(<\/span>\n        <span class=\"p\">&lt;<\/span><span class=\"nt\">nav<\/span><span class=\"p\">&gt;<\/span>\n            <span class=\"p\">&lt;<\/span><span class=\"nc\">Link<\/span> <span class=\"na\">to<\/span><span class=\"p\">=<\/span><span class=\"s\">\"https:\/\/dev.to\/\"<\/span><span class=\"p\">&gt;<\/span>Home<span class=\"p\"\/><span class=\"nc\">Link<\/span><span class=\"p\">&gt;<\/span>\n            <span class=\"p\">&lt;<\/span><span class=\"nc\">Link<\/span> <span class=\"na\">to<\/span><span class=\"p\">=<\/span><span class=\"s\">\"https:\/\/dev.to\/about\"<\/span><span class=\"p\">&gt;<\/span>About<span class=\"p\"\/><span class=\"nc\">Link<\/span><span class=\"p\">&gt;<\/span>\n        <span class=\"p\"\/><span class=\"nt\">nav<\/span><span class=\"p\">&gt;<\/span>\n    <span class=\"p\">);<\/span>\n<span class=\"p\">}<\/span>\n\n<span class=\"kd\">function<\/span> <span class=\"nf\">App<\/span><span class=\"p\">()<\/span> <span class=\"p\">{<\/span>\n    <span class=\"k\">return <\/span><span class=\"p\">(<\/span>\n        <span class=\"p\">&lt;<\/span><span class=\"nc\">BrowserRouter<\/span><span class=\"p\">&gt;<\/span>\n            <span class=\"p\">&lt;<\/span><span class=\"nc\">Navbar<\/span> <span class=\"p\">\/&gt;<\/span>\n            <span class=\"p\">&lt;<\/span><span class=\"nc\">Routes<\/span><span class=\"p\">&gt;<\/span>\n                <span class=\"p\">&lt;<\/span><span class=\"nc\">Route<\/span> <span class=\"na\">path<\/span><span class=\"p\">=<\/span><span class=\"s\">\"https:\/\/dev.to\/\"<\/span> <span class=\"na\">element<\/span><span class=\"p\">=<\/span><span class=\"si\">{<\/span><span class=\"p\">&lt;<\/span><span class=\"nc\">Home<\/span> <span class=\"p\">\/&gt;<\/span><span class=\"si\">}<\/span> <span class=\"p\">\/&gt;<\/span>\n                <span class=\"p\">&lt;<\/span><span class=\"nc\">Route<\/span> <span class=\"na\">path<\/span><span class=\"p\">=<\/span><span class=\"s\">\"https:\/\/dev.to\/about\"<\/span> <span class=\"na\">element<\/span><span class=\"p\">=<\/span><span class=\"si\">{<\/span><span class=\"p\">&lt;<\/span><span class=\"nc\">About<\/span> <span class=\"p\">\/&gt;<\/span><span class=\"si\">}<\/span> <span class=\"p\">\/&gt;<\/span>\n            <span class=\"p\"\/><span class=\"nc\">Routes<\/span><span class=\"p\">&gt;<\/span>\n        <span class=\"p\"\/><span class=\"nc\">BrowserRouter<\/span><span class=\"p\">&gt;<\/span>\n    <span class=\"p\">);<\/span>\n<span class=\"p\">}<\/span>\n\n<span class=\"k\">export<\/span> <span class=\"k\">default<\/span> <span class=\"nx\">App<\/span><span class=\"p\">;<\/span>\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<p><strong>\u062a\u0648\u0636\u06cc\u062d<\/strong>:<\/p>\n<ul>\n<li>\n<strong><code>Link<\/code><\/strong>  \u062c\u0627\u06cc\u06af\u0632\u06cc\u0646 \u0633\u0646\u062a\u06cc \u0645\u06cc \u0634\u0648\u062f <code><a\/><\/code> \u0628\u0631\u0686\u0633\u0628 \u0647\u0627<\/li>\n<li>\u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u06a9\u0646\u06cc\u062f <code>to<\/code> prop \u0628\u0631\u0627\u06cc \u062a\u0639\u06cc\u06cc\u0646 \u0645\u0633\u06cc\u0631 \u0645\u0642\u0635\u062f.<\/li>\n<\/ul>\n<h4><span class=\"ez-toc-section\" id=\"%D9%85%D8%A4%D9%84%D9%81%D9%87_NavLink\"><\/span>\n<p>  <strong>\u0645\u0624\u0644\u0641\u0647 NavLink<\/strong><br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h4>\n<p>\u0627\u06cc\u0646 <code>NavLink<\/code> \u062c\u0632\u0621 \u0645\u0634\u0627\u0628\u0647 \u0627\u0633\u062a <code>Link<\/code>\u060c \u0627\u0645\u0627 \u0628\u0647 \u0634\u0645\u0627 \u0627\u0645\u06a9\u0627\u0646 \u0645\u06cc \u062f\u0647\u062f \u0644\u06cc\u0646\u06a9 \u0631\u0627 \u0628\u0631 \u0627\u0633\u0627\u0633 \u0641\u0639\u0627\u0644 \u0628\u0648\u062f\u0646 \u0622\u0646 \u0627\u0633\u062a\u0627\u06cc\u0644 \u062f\u0647\u06cc\u062f.<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight jsx\"><code><span class=\"k\">import<\/span> <span class=\"nx\">React<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">react<\/span><span class=\"dl\">\"<\/span><span class=\"p\">;<\/span>\n<span class=\"k\">import<\/span> <span class=\"p\">{<\/span> <span class=\"nx\">NavLink<\/span> <span class=\"p\">}<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">react-router-dom<\/span><span class=\"dl\">\"<\/span><span class=\"p\">;<\/span>\n\n<span class=\"kd\">function<\/span> <span class=\"nf\">Navbar<\/span><span class=\"p\">()<\/span> <span class=\"p\">{<\/span>\n    <span class=\"k\">return <\/span><span class=\"p\">(<\/span>\n        <span class=\"p\">&lt;<\/span><span class=\"nt\">nav<\/span><span class=\"p\">&gt;<\/span>\n            <span class=\"p\">&lt;<\/span><span class=\"nc\">NavLink<\/span> <span class=\"na\">to<\/span><span class=\"p\">=<\/span><span class=\"s\">\"https:\/\/dev.to\/\"<\/span> <span class=\"na\">activeClassName<\/span><span class=\"p\">=<\/span><span class=\"s\">\"active\"<\/span><span class=\"p\">&gt;<\/span>Home<span class=\"p\"\/><span class=\"nc\">NavLink<\/span><span class=\"p\">&gt;<\/span>\n            <span class=\"p\">&lt;<\/span><span class=\"nc\">NavLink<\/span> <span class=\"na\">to<\/span><span class=\"p\">=<\/span><span class=\"s\">\"https:\/\/dev.to\/about\"<\/span> <span class=\"na\">activeClassName<\/span><span class=\"p\">=<\/span><span class=\"s\">\"active\"<\/span><span class=\"p\">&gt;<\/span>About<span class=\"p\"\/><span class=\"nc\">NavLink<\/span><span class=\"p\">&gt;<\/span>\n        <span class=\"p\"\/><span class=\"nt\">nav<\/span><span class=\"p\">&gt;<\/span>\n    <span class=\"p\">);<\/span>\n<span class=\"p\">}<\/span>\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<p><strong>\u062a\u0641\u0627\u0648\u062a \u06a9\u0644\u06cc\u062f\u06cc<\/strong>:<\/p>\n<ul>\n<li>\u0627\u06cc\u0646 <code>NavLink<\/code> \u062c\u0632\u0621 \u0627\u0636\u0627\u0641\u0647 \u0645\u06cc \u06a9\u0646\u062f <code>activeClassName<\/code> (\u06cc\u0627 <code>isActive<\/code>) \u0628\u0631\u0627\u06cc \u0627\u0633\u062a\u0627\u06cc\u0644 \u062f\u0627\u062f\u0646 \u0628\u0647 \u0644\u06cc\u0646\u06a9 \u0647\u0627\u06cc \u0641\u0639\u0627\u0644.<\/li>\n<\/ul>\n<hr\/>\n<h2><span class=\"ez-toc-section\" id=\"%D9%82%D8%B1%D8%A7%D8%B1_%D8%AF%D8%A7%D8%AF%D9%86_%D8%A2%D9%86_%D9%87%D9%85%D9%87_%D8%A8%D8%A7_%D9%87%D9%85\"><\/span>\n<p>  <strong>\u0642\u0631\u0627\u0631 \u062f\u0627\u062f\u0646 \u0622\u0646 \u0647\u0645\u0647 \u0628\u0627 \u0647\u0645<\/strong><br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>\u0628\u06cc\u0627\u06cc\u06cc\u062f \u0627\u06cc\u0646 \u0645\u0641\u0627\u0647\u06cc\u0645 \u0631\u0627 \u062f\u0631 \u06cc\u06a9 \u0645\u062b\u0627\u0644 \u06a9\u0648\u0686\u06a9 \u0628\u0631\u0646\u0627\u0645\u0647 \u06a9\u0627\u0631\u0628\u0631\u062f\u06cc \u062a\u0631\u06a9\u06cc\u0628 \u06a9\u0646\u06cc\u0645:<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight jsx\"><code><span class=\"k\">import<\/span> <span class=\"nx\">React<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">react<\/span><span class=\"dl\">\"<\/span><span class=\"p\">;<\/span>\n<span class=\"k\">import<\/span> <span class=\"p\">{<\/span> <span class=\"nx\">BrowserRouter<\/span><span class=\"p\">,<\/span> <span class=\"nx\">Routes<\/span><span class=\"p\">,<\/span> <span class=\"nx\">Route<\/span><span class=\"p\">,<\/span> <span class=\"nx\">Link<\/span> <span class=\"p\">}<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">react-router-dom<\/span><span class=\"dl\">\"<\/span><span class=\"p\">;<\/span>\n\n<span class=\"kd\">function<\/span> <span class=\"nf\">Home<\/span><span class=\"p\">()<\/span> <span class=\"p\">{<\/span>\n    <span class=\"k\">return<\/span> <span class=\"p\">&lt;<\/span><span class=\"nt\">h1<\/span><span class=\"p\">&gt;<\/span>Welcome to the Home Page!<span class=\"p\"\/><span class=\"nt\">h1<\/span><span class=\"p\">&gt;;<\/span>\n<span class=\"p\">}<\/span>\n\n<span class=\"kd\">function<\/span> <span class=\"nf\">About<\/span><span class=\"p\">()<\/span> <span class=\"p\">{<\/span>\n    <span class=\"k\">return<\/span> <span class=\"p\">&lt;<\/span><span class=\"nt\">h1<\/span><span class=\"p\">&gt;<\/span>Learn More About Us<span class=\"p\"\/><span class=\"nt\">h1<\/span><span class=\"p\">&gt;;<\/span>\n<span class=\"p\">}<\/span>\n\n<span class=\"kd\">function<\/span> <span class=\"nf\">Navbar<\/span><span class=\"p\">()<\/span> <span class=\"p\">{<\/span>\n    <span class=\"k\">return <\/span><span class=\"p\">(<\/span>\n        <span class=\"p\">&lt;<\/span><span class=\"nt\">nav<\/span><span class=\"p\">&gt;<\/span>\n            <span class=\"p\">&lt;<\/span><span class=\"nc\">Link<\/span> <span class=\"na\">to<\/span><span class=\"p\">=<\/span><span class=\"s\">\"https:\/\/dev.to\/\"<\/span><span class=\"p\">&gt;<\/span>Home<span class=\"p\"\/><span class=\"nc\">Link<\/span><span class=\"p\">&gt;<\/span>\n            <span class=\"p\">&lt;<\/span><span class=\"nc\">Link<\/span> <span class=\"na\">to<\/span><span class=\"p\">=<\/span><span class=\"s\">\"https:\/\/dev.to\/about\"<\/span><span class=\"p\">&gt;<\/span>About<span class=\"p\"\/><span class=\"nc\">Link<\/span><span class=\"p\">&gt;<\/span>\n        <span class=\"p\"\/><span class=\"nt\">nav<\/span><span class=\"p\">&gt;<\/span>\n    <span class=\"p\">);<\/span>\n<span class=\"p\">}<\/span>\n\n<span class=\"kd\">function<\/span> <span class=\"nf\">App<\/span><span class=\"p\">()<\/span> <span class=\"p\">{<\/span>\n    <span class=\"k\">return <\/span><span class=\"p\">(<\/span>\n        <span class=\"p\">&lt;<\/span><span class=\"nc\">BrowserRouter<\/span><span class=\"p\">&gt;<\/span>\n            <span class=\"p\">&lt;<\/span><span class=\"nc\">Navbar<\/span> <span class=\"p\">\/&gt;<\/span>\n            <span class=\"p\">&lt;<\/span><span class=\"nc\">Routes<\/span><span class=\"p\">&gt;<\/span>\n                <span class=\"p\">&lt;<\/span><span class=\"nc\">Route<\/span> <span class=\"na\">path<\/span><span class=\"p\">=<\/span><span class=\"s\">\"https:\/\/dev.to\/\"<\/span> <span class=\"na\">element<\/span><span class=\"p\">=<\/span><span class=\"si\">{<\/span><span class=\"p\">&lt;<\/span><span class=\"nc\">Home<\/span> <span class=\"p\">\/&gt;<\/span><span class=\"si\">}<\/span> <span class=\"p\">\/&gt;<\/span>\n                <span class=\"p\">&lt;<\/span><span class=\"nc\">Route<\/span> <span class=\"na\">path<\/span><span class=\"p\">=<\/span><span class=\"s\">\"https:\/\/dev.to\/about\"<\/span> <span class=\"na\">element<\/span><span class=\"p\">=<\/span><span class=\"si\">{<\/span><span class=\"p\">&lt;<\/span><span class=\"nc\">About<\/span> <span class=\"p\">\/&gt;<\/span><span class=\"si\">}<\/span> <span class=\"p\">\/&gt;<\/span>\n            <span class=\"p\"\/><span class=\"nc\">Routes<\/span><span class=\"p\">&gt;<\/span>\n        <span class=\"p\"\/><span class=\"nc\">BrowserRouter<\/span><span class=\"p\">&gt;<\/span>\n    <span class=\"p\">);<\/span>\n<span class=\"p\">}<\/span>\n\n<span class=\"k\">export<\/span> <span class=\"k\">default<\/span> <span class=\"nx\">App<\/span><span class=\"p\">;<\/span>\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<h3><span class=\"ez-toc-section\" id=\"%D8%AE%D8%B1%D9%88%D8%AC%DB%8C\"><\/span>\n<p>  <strong>\u062e\u0631\u0648\u062c\u06cc<\/strong>:<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<ul>\n<li>\u062d\u0631\u06a9\u062a \u0628\u0647 <code>\/<\/code> \u0628\u0631\u0627\u06cc \u062f\u06cc\u062f\u0646 \u0635\u0641\u062d\u0647 \u0627\u0635\u0644\u06cc<\/li>\n<li>\u062d\u0631\u06a9\u062a \u0628\u0647 <code>\/about<\/code> \u0628\u0631\u0627\u06cc \u062f\u06cc\u062f\u0646 \u0635\u0641\u062d\u0647 \u062f\u0631\u0628\u0627\u0631\u0647<\/li>\n<li>\u0635\u0641\u062d\u0647 \u0628\u0647 \u0635\u0648\u0631\u062a \u067e\u0648\u06cc\u0627 \u0648 \u0628\u062f\u0648\u0646 \u0628\u0627\u0631\u06af\u06cc\u0631\u06cc \u0645\u062c\u062f\u062f \u0628\u0647 \u0631\u0648\u0632 \u0645\u06cc \u0634\u0648\u062f.<\/li>\n<\/ul>\n<hr\/>\n<h2><span class=\"ez-toc-section\" id=\"%D9%85%D8%B1%D8%A7%D8%AD%D9%84_%D8%A8%D8%B9%D8%AF%DB%8C\"><\/span>\n<p>  <strong>\u0645\u0631\u0627\u062d\u0644 \u0628\u0639\u062f\u06cc<\/strong><br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>\u062f\u0631 \u0627\u06cc\u0646 \u0642\u0633\u0645\u062a \u0628\u0647 \u0627\u0635\u0648\u0644 \u0627\u0648\u0644\u06cc\u0647 \u067e\u0631\u062f\u0627\u062e\u062a\u06cc\u0645:<\/p>\n<ol>\n<li><strong>React Router \u0686\u06cc\u0633\u062a \u0648 \u0686\u06af\u0648\u0646\u0647 \u06a9\u0627\u0631 \u0645\u06cc \u06a9\u0646\u062f.<\/strong><\/li>\n<li><strong>\u0631\u0627\u0647 \u0627\u0646\u062f\u0627\u0632\u06cc <code>BrowserRouter<\/code>.<\/strong><\/li>\n<li><strong>\u062a\u0639\u0631\u06cc\u0641 \u0645\u0633\u06cc\u0631\u0647\u0627 \u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 <code>Routes<\/code> \u0648 <code>Route<\/code>.<\/strong><\/li>\n<li><strong>\u0627\u0641\u0632\u0648\u062f\u0646 \u067e\u06cc\u0645\u0627\u06cc\u0634 \u0628\u0627 <code>Link<\/code> \u0648 <code>NavLink<\/code>.<\/strong><\/li>\n<\/ol>\n<p>\u062f\u0631 <strong>\u0645\u0642\u0627\u0644\u0647 \u0628\u0639\u062f\u06cc<\/strong>\u060c \u0628\u0631\u0631\u0633\u06cc \u0645\u06cc \u06a9\u0646\u06cc\u0645:<\/p>\n<ul>\n<li>\u0645\u0633\u06cc\u0631\u06cc\u0627\u0628\u06cc \u062a\u0648 \u062f\u0631 \u062a\u0648<\/li>\n<li>\u0645\u0633\u06cc\u0631\u0647\u0627\u06cc \u067e\u0648\u06cc\u0627<\/li>\n<li>\u0645\u062f\u06cc\u0631\u06cc\u062a \u067e\u0627\u0631\u0627\u0645\u062a\u0631\u0647\u0627\u06cc URL<\/li>\n<\/ul>\n<p>\u0645\u0646\u062a\u0638\u0631 \u0642\u0633\u0645\u062a \u0628\u0639\u062f\u06cc \u0627\u06cc\u0646 \u0645\u0637\u0644\u0628 \u0628\u0627\u0634\u06cc\u062f <strong>\u0631\u0627\u0647\u0646\u0645\u0627\u06cc \u0646\u0647\u0627\u06cc\u06cc \u0628\u0631\u0627\u06cc \u0631\u0648\u062a\u0631 React<\/strong> \u0633\u0631\u06cc\u0627\u0644!<\/p>\n<\/p><\/div>\n","protected":false},"excerpt":{"rendered":"<p>Summarize this content to 400 words in Persian Lang \u0631\u0627\u0647\u0646\u0645\u0627\u06cc \u0646\u0647\u0627\u06cc\u06cc \u0628\u0631\u0627\u06cc \u0631\u0648\u062a\u0631 \u0648\u0627\u06a9\u0646\u0634: \u0645\u0641\u0627\u0647\u06cc\u0645 \u0648 \u0631\u0627\u0647\u0646\u0645\u0627\u06cc \u0639\u0645\u0644\u06cc \u0645\u0642\u062f\u0645\u0647 \u0645\u0633\u06cc\u0631\u06cc\u0627\u0628\u06cc \u06cc\u06a9 \u0648\u06cc\u0698\u06af\u06cc \u0636\u0631\u0648\u0631\u06cc \u062f\u0631 \u0647\u0631 \u0628\u0631\u0646\u0627\u0645\u0647 \u0648\u0628 \u0645\u062f\u0631\u0646 \u0627\u0633\u062a. \u0627\u06cc\u0646 \u0628\u0647 \u06a9\u0627\u0631\u0628\u0631\u0627\u0646 \u0627\u062c\u0627\u0632\u0647 \u0645\u06cc \u062f\u0647\u062f \u062a\u0627 \u0628\u06cc\u0646 \u0628\u062e\u0634 \u0647\u0627 \u06cc\u0627 \u0635\u0641\u062d\u0627\u062a \u0645\u062e\u062a\u0644\u0641 \u0628\u0647 \u0637\u0648\u0631 \u06cc\u06a9\u067e\u0627\u0631\u0686\u0647 \u062d\u0631\u06a9\u062a \u06a9\u0646\u0646\u062f \u0648 \u062a\u062c\u0631\u0628\u0647 \u0627\u06cc \u0631\u0648\u0627\u0646 \u0648 \u062a\u0639\u0627\u0645\u0644\u06cc \u0627\u06cc\u062c\u0627\u062f \u06a9\u0646\u0646\u062f. &hellip;<\/p>\n","protected":false},"author":2,"featured_media":83719,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"fifu_image_url":"","fifu_image_alt":"","footnotes":""},"categories":[339],"tags":[],"class_list":["post-83718","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-dev"],"_links":{"self":[{"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/posts\/83718","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/comments?post=83718"}],"version-history":[{"count":0,"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/posts\/83718\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/media\/83719"}],"wp:attachment":[{"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/media?parent=83718"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/categories?post=83718"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/tags?post=83718"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}