\u062f\u0631 React\u060c \u0631\u0648\u062a\u0631\u0647\u0627 \u0628\u0647 \u0634\u0645\u0627 \u06a9\u0645\u06a9 \u0645\u06cc\u200c\u06a9\u0646\u0646\u062f \u0628\u06cc\u0646 URL\u0647\u0627\u06cc \u0645\u062e\u062a\u0644\u0641 \u062f\u0631 \u0627\u067e\u0644\u06cc\u06a9\u06cc\u0634\u0646 \u062c\u0627\u0628\u0647\u200c\u062c\u0627 \u0634\u0648\u06cc\u062f. \u0627\u06cc\u0646 \u06a9\u0627\u0631 \u0628\u0627\u0639\u062b \u0645\u06cc\u200c\u0634\u0648\u062f \u06a9\u0627\u0631\u0628\u0631 \u0628\u062a\u0648\u0627\u0646\u062f \u0628\u06cc\u0646 \u0628\u062e\u0634\u200c\u0647\u0627\u06cc \u0645\u062e\u062a\u0644\u0641 \u0628\u0631\u0646\u0627\u0645\u0647 \u062d\u0631\u06a9\u062a \u06a9\u0646\u062f \u0628\u062f\u0648\u0646 \u0627\u06cc\u0646\u06a9\u0647 \u0648\u0636\u0639\u06cc\u062a (state) \u0627\u0632 \u0628\u06cc\u0646 \u0628\u0631\u0648\u062f. \u0647\u0645\u0686\u0646\u06cc\u0646 \u0647\u0631 \u0628\u062e\u0634 \u0627\u0632 \u0627\u067e \u0645\u06cc\u200c\u062a\u0648\u0627\u0646\u062f URL \u0645\u062e\u0635\u0648\u0635 \u0628\u0647 \u062e\u0648\u062f\u0634 \u0631\u0627 \u062f\u0627\u0634\u062a\u0647 \u0628\u0627\u0634\u062f \u06a9\u0647 \u0627\u0634\u062a\u0631\u0627\u06a9\u200c\u06af\u0630\u0627\u0631\u06cc \u0622\u0646 \u0631\u0627 \u0631\u0627\u062d\u062a\u200c\u062a\u0631 \u0645\u06cc\u200c\u06a9\u0646\u062f.<\/p>\n
\u06a9\u062a\u0627\u0628\u062e\u0627\u0646\u0647 React Router<\/strong> \u06cc\u06a9\u06cc \u0627\u0632 \u0645\u062d\u0628\u0648\u0628\u200c\u062a\u0631\u06cc\u0646 \u0627\u0628\u0632\u0627\u0631\u0647\u0627\u06cc \u0645\u0633\u06cc\u0631\u06cc\u0627\u0628\u06cc \u062f\u0631 React \u0627\u0633\u062a. \u0627\u06cc\u0646 \u06a9\u062a\u0627\u0628\u062e\u0627\u0646\u0647 \u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a\u200c\u0647\u0627\u06cc \u0633\u0627\u062f\u0647\u060c \u06cc\u06a9 \u0633\u06cc\u0633\u062a\u0645 \u0645\u0633\u06cc\u0631\u06cc\u0627\u0628\u06cc \u0627\u0639\u0644\u0627\u0645\u06cc (declarative)<\/strong> \u062f\u0631 \u0627\u062e\u062a\u06cc\u0627\u0631 \u0634\u0645\u0627 \u0642\u0631\u0627\u0631 \u0645\u06cc\u200c\u062f\u0647\u062f\u061b \u06cc\u0639\u0646\u06cc \u0634\u0645\u0627 \u0645\u0634\u062e\u0635 \u0645\u06cc\u200c\u06a9\u0646\u06cc\u062f \u0647\u0631 \u0645\u0633\u06cc\u0631 (route) \u0686\u0647 \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a\u06cc \u0631\u0627 \u0646\u0645\u0627\u06cc\u0634 \u062f\u0647\u062f.<\/p>\n \u062f\u0631 \u0627\u06cc\u0646 \u0622\u0645\u0648\u0632\u0634 \u06cc\u0627\u062f \u0645\u06cc\u200c\u06af\u06cc\u0631\u06cc\u062f:<\/p>\n \u062f\u0631 \u062a\u0631\u0645\u06cc\u0646\u0627\u0644 \u062f\u0633\u062a\u0648\u0631 \u0632\u06cc\u0631 \u0631\u0627 \u0627\u062c\u0631\u0627 \u06a9\u0646\u06cc\u062f:<\/p>\n \u0633\u067e\u0633 \u0686\u0646\u062f \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a \u0633\u0627\u062f\u0647 \u0628\u0633\u0627\u0632\u06cc\u062f (\u0645\u062b\u0644\u0627\u064b \u0628\u0631\u0627\u06cc \u062d\u06cc\u0648\u0627\u0646\u0627\u062a \u062f\u0631\u06cc\u0627\u06cc\u06cc):<\/p>\n \u0647\u0631 \u06a9\u062f\u0627\u0645 \u0641\u0642\u0637 \u06cc\u06a9 \u062f\u0631 \u0641\u0627\u06cc\u0644 \u0633\u0627\u062e\u062a\u0627\u0631 \u0627\u0635\u0644\u06cc:<\/p>\n \u062a\u0631\u062a\u06cc\u0628 \u0645\u0633\u06cc\u0631\u0647\u0627 \u0645\u0647\u0645 \u0627\u0633\u062a. \u0645\u0633\u06cc\u0631\u0647\u0627\u06cc \u062e\u0627\u0635\u200c\u062a\u0631 \u0628\u0627\u06cc\u062f \u0628\u0627\u0644\u0627\u062a\u0631 \u0642\u0631\u0627\u0631 \u0628\u06af\u06cc\u0631\u0646\u062f.<\/p>\n \u0628\u0647 \u062c\u0627\u06cc \u2705 \u0645\u0632\u06cc\u062a: \u0628\u062f\u0648\u0646 \u0631\u0641\u0631\u0634 \u0635\u0641\u062d\u0647 \u062c\u0627\u0628\u0647\u200c\u062c\u0627 \u0645\u06cc\u200c\u0634\u0648\u062f.<\/p>\n \u0645\u062b\u0644\u0627\u064b:<\/p>\n \u0633\u067e\u0633 \u0645\u0642\u062f\u0627\u0631 \u0631\u0627 \u0627\u0633\u062a\u062e\u0631\u0627\u062c \u0645\u06cc\u200c\u06a9\u0646\u06cc\u062f.<\/p>\n \u0645\u062b\u0644\u0627\u064b:<\/p>\n Route:<\/p>\n \u062f\u0631 \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a:<\/p>\n \u062f\u0631 \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a Whale:<\/p>\n\n
<Link><\/code><\/li>\n
\n\u067e\u06cc\u0634\u200c\u0646\u06cc\u0627\u0632\u0647\u0627<\/h2>\n
\n
\n\u0645\u0631\u062d\u0644\u0647 1: \u0646\u0635\u0628 React Router<\/h2>\n
npm<\/span> install react-router-dom<\/code><\/pre>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n\n
<h2><\/code> \u0633\u0627\u062f\u0647 \u0646\u0645\u0627\u06cc\u0634 \u0645\u06cc\u200c\u062f\u0647\u0646\u062f.<\/p>\n
\n\u0645\u0631\u062d\u0644\u0647 2: \u0627\u0636\u0627\u0641\u0647 \u06a9\u0631\u062f\u0646 \u0645\u0633\u06cc\u0631\u0647\u0627 (Routes)<\/h2>\n
App.js<\/code>:<\/p>\nimport<\/span> { BrowserRouter<\/span>, Route<\/span>, Switch<\/span> } from<\/span> 'react-router-dom'<\/span>;<\/code><\/pre>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<BrowserRouter><\/span>\r\n <Switch><\/span>\r\n <Route<\/span> path<\/span>=<\/span>\"\/manatee\"<\/span>><\/span>\r\n <Manatee<\/span> \/><\/span>\r\n <\/Route><\/span>\r\n <Route<\/span> path<\/span>=<\/span>\"\/narwhal\"<\/span>><\/span>\r\n <Narwhal<\/span> \/><\/span>\r\n <\/Route><\/span>\r\n <Route<\/span> path<\/span>=<\/span>\"\/whale\"<\/span>><\/span>\r\n <Whale<\/span> \/><\/span>\r\n <\/Route><\/span>\r\n <\/Switch><\/span>\r\n<\/BrowserRouter><\/span><\/code><\/pre>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n\u0646\u06a9\u062a\u0647 \u0645\u0647\u0645<\/h3>\n
\n\u0633\u0627\u062e\u062a \u0645\u0646\u0648 \u0628\u0627 Link<\/h2>\n
<a><\/code> \u0627\u0632 <Link><\/code> \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u06a9\u0646\u06cc\u062f:<\/p>\nimport<\/span> { Link<\/span> } from<\/span> 'react-router-dom'<\/span>;\r\n\r\n<Link<\/span> to<\/span>=<\/span>\"\/whale\"<\/span>><\/span>Whale<\/Link><\/span><\/code><\/pre>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n
\n\u0645\u0631\u062d\u0644\u0647 3: \u062f\u0631\u06cc\u0627\u0641\u062a \u062f\u0627\u062f\u0647 \u0627\u0632 URL \u0628\u0627 Hooks<\/h2>\n
\u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 useLocation (Query Params)<\/h3>\n
\/whale?type=blue<\/code><\/pre>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\nimport<\/span> { useLocation<\/span> } from<\/span> 'react-router-dom'<\/span>;\r\n\r\nconst<\/span> { search } =<\/span> useLocation<\/span>();<\/code><\/pre>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n
\n\u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 useParams (URL Params)<\/h3>\n
\/whale\/blue<\/code><\/pre>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<Route<\/span> path<\/span>=<\/span>\"\/whale\/:type\"<\/span>><\/span><\/code><\/pre>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\nimport<\/span> { useParams<\/span> } from<\/span> 'react-router-dom'<\/span>;\r\n\r\nconst<\/span> { type } =<\/span> useParams<\/span>();<\/code><\/pre>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n
\n\u0645\u0631\u062d\u0644\u0647 4: \u0645\u0633\u06cc\u0631\u0647\u0627\u06cc \u062a\u0648 \u062f\u0631 \u062a\u0648 (Nested Routes)<\/h2>\n