{"id":2461,"date":"2023-02-20T08:51:37","date_gmt":"2023-02-20T08:51:37","guid":{"rendered":"https:\/\/codeinsightacademy.com\/blog\/?p=2461"},"modified":"2023-02-20T12:01:41","modified_gmt":"2023-02-20T12:01:41","slug":"routing-2","status":"publish","type":"post","link":"https:\/\/codeinsightacademy.com\/blog\/react\/routing-2\/","title":{"rendered":"Routing"},"content":{"rendered":"\n
npm i react-router-dom <\/code><\/pre>\n\n\n\n
npx create-react-app routingapp<\/code><\/pre>\n\n\n\n
App.js<\/p>\n\n\n\n
import Home from '.\/components\/Home';\nimport Blogs from '.\/components\/Blogs';\nimport Contact from '.\/components\/Contact';\nimport NoPage from '.\/components\/NoPage';\nimport { BrowserRouter, Outlet, Route, Routes } from 'react-router-dom';\nimport Layout from '.\/components\/Layout';\n\nfunction App() {\n  return (\n    <>\n    <h1>HELLO WORLD<\/h1>\n    <BrowserRouter>\n      <Routes>\n        <Route path=\"\/admin\" element={<Layout \/>}>\n          <Route index element={<Home \/>} \/>\n          <Route path=\"contact\" element={<Contact \/>} \/>\n          <Route path=\"*\" element={<NoPage \/>} \/>\n        <\/Route>\n        <Route path=\"\/user\" element={<Layout \/>}>\n          <Route index element={<Home \/>} \/>\n          <Route path=\"contact\" element={<Contact \/>} \/>\n          <Route path=\"blogs\" element={<Blogs \/>} \/>\n          <Route path=\"test\" element={<div>This is test component<\/div>} \/>\n          <Route path=\"*\" element={<NoPage \/>} \/>    \n        <\/Route>\n      <\/Routes>\n    <\/BrowserRouter>\n    <\/>\n\n  );\n}\n\nexport default App;\n<\/code><\/pre>\n\n\n\n
Layout.js<\/p>\n\n\n\n
import { Outlet, Link } from \"react-router-dom\";\n\nexport default function Layout() {\n  return (\n    <>\n      <nav>\n        <ul>\n          <li>\n            <Link to=\"\/\">Home<\/Link>\n          <\/li>\n          <li>\n            <Link to=\"\/blogs\">Blogs<\/Link>\n          <\/li>\n          <li>\n            <Link to=\"\/contact\">Contact<\/Link>\n          <\/li>\n        <\/ul>\n      <\/nav>\n      <Outlet \/>\n    <\/>\n  )\n}\n<\/code><\/pre>\n\n\n\n
Outlet is the block where router components get loaded<\/p>\n","protected":false},"excerpt":{"rendered":"
App.js Layout.js Outlet is the block where router components get loaded<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[35],"tags":[],"_links":{"self":[{"href":"https:\/\/codeinsightacademy.com\/blog\/wp-json\/wp\/v2\/posts\/2461"}],"collection":[{"href":"https:\/\/codeinsightacademy.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/codeinsightacademy.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/codeinsightacademy.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/codeinsightacademy.com\/blog\/wp-json\/wp\/v2\/comments?post=2461"}],"version-history":[{"count":3,"href":"https:\/\/codeinsightacademy.com\/blog\/wp-json\/wp\/v2\/posts\/2461\/revisions"}],"predecessor-version":[{"id":2465,"href":"https:\/\/codeinsightacademy.com\/blog\/wp-json\/wp\/v2\/posts\/2461\/revisions\/2465"}],"wp:attachment":[{"href":"https:\/\/codeinsightacademy.com\/blog\/wp-json\/wp\/v2\/media?parent=2461"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/codeinsightacademy.com\/blog\/wp-json\/wp\/v2\/categories?post=2461"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/codeinsightacademy.com\/blog\/wp-json\/wp\/v2\/tags?post=2461"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}