{ "componentChunkName": "component---src-templates-blog-post-js", "path": "/react-tutorial-using-react-router6-typescript/", "result": {"data":{"site":{"siteMetadata":{"title":"CrewCode Solutions"}},"markdownRemark":{"id":"72a4892b-edf3-5513-90ce-f24179cc276d","excerpt":"In this article i will explain you step by step to use react router v6 with nested routes in react typescript project Step 1: Create react typescript project…","html":"

In this article i will explain you step by step to use react router v6 with nested routes in react typescript project

\n

Step 1: Create react typescript project with following command

\n
npx create-react-app my-app --template typescript\n
\n

Step 2: Install react router dom v6

\n

Install react router dom v6 in your newly created project using following command

\n
npm install --save react-router-dom@6\n
\n

Step 3: Create Pages and component i will show you an example of Blog website

\n\n
import React from \"react\";\nimport { Link, Routes, Route } from \"react-router-dom\";\nimport BlogCategoryWiseListing from \"../components/blogcategory\";\nimport AllBlogList from \"../components/bloglist\";\n\nconst Blog: React.FC<{}> = () => {\n  return (\n    <div className=\"album py-5 bg-light\">\n      <div className=\"container\">\n        <div className=\"row\">\n          <div className=\"col-md-2\">\n            <div className=\"list-group\" id=\"list-tab\" role=\"tablist\">\n              <Link\n                className=\"list-group-item list-group-item-action active\"\n                id=\"list-home-list\"\n                data-bs-toggle=\"list\"\n                role=\"tab\"\n                aria-controls=\"list-home\"\n                to=\"/blog/javascript\"\n              >\n                Javascript\n              </Link>\n              <Link\n                className=\"list-group-item list-group-item-action\"\n                id=\"list-home-list\"\n                data-bs-toggle=\"list\"\n                role=\"tab\"\n                aria-controls=\"list-home\"\n                to=\"/blog/php\"\n              >\n                Php\n              </Link>\n            </div>\n          </div>\n          <div className=\"col-md-10\">\n            <Routes>\n              <Route path=\"/\" element={<AllBlogList />} />\n              <Route path=\"javascript\" element={<BlogCategoryWiseListing />} />\n            </Routes>\n          </div>\n        </div>\n      </div>\n    </div>\n  );\n};\n\nexport default Blog;\n
\n\n
import React from \"react\";\n\nconst Home: React.FC<{}> = () => {\n  return (\n    <div>\n      <h1>This is home component</h1>\n    </div>\n  );\n};\n\nexport default Home;\n
\n\n
import React from \"react\";\n\nconst Login: React.FC<{}> = () => {\n  return (\n    <div>\n      <h1>This is login component</h1>\n    </div>\n  );\n};\n\nexport default Login;\n
\n\n
import React from \"react\";\n\nconst SignUp: React.FC<{}> = () => {\n  return (\n    <div>\n      <h1>This is signup component</h1>\n    </div>\n  );\n};\n\nexport default SignUp;\n
\n\n
import React from \"react\";\nimport { Link, useNavigate } from \"react-router-dom\";\n\nconst NavBar: React.FC<{}> = () => {\n  const navigate = useNavigate();\n  return (\n    <header className=\"p-3 bg-dark text-white\">\n      <div className=\"container\">\n        <div className=\"d-flex flex-wrap align-items-center justify-content-center justify-content-lg-start\">\n          <div\n            onClick={() => {\n              navigate(\"/\");\n            }}\n            className=\"d-flex align-items-center mb-2 mb-lg-0 text-white text-decoration-none\"\n          >\n            <h4>Routing Example v6</h4>\n          </div>\n          <ul className=\"nav col-12 col-lg-auto me-lg-auto mb-2 justify-content-center mb-md-0\">\n            <li>\n              <Link to=\"/\" className=\"nav-link px-2 text-white\">\n                Home\n              </Link>\n            </li>\n            <li>\n              <Link to=\"/blog\" className=\"nav-link px-2 text-white\">\n                Blog\n              </Link>\n            </li>\n          </ul>\n          <div className=\"text-end\">\n            <Link\n              to=\"/signin\"\n              type=\"button\"\n              className=\"btn btn-outline-light me-2\"\n            >\n              Login\n            </Link>\n            <Link to=\"/signup\" type=\"button\" className=\"btn btn-warning\">\n              Sign Up\n            </Link>\n          </div>\n        </div>\n      </div>\n    </header>\n  );\n};\n\nexport default NavBar;\n
\n\n
import React from \"react\";\n\nconst BlogCategoryWiseListing: React.FC<{}> = () => {\n  return (\n    <div>\n      <h1>Blog Category Wise Listing</h1>\n    </div>\n  );\n};\n\nexport default BlogCategoryWiseListing;\n
\n\n
import React from \"react\";\n\nconst AllBlogList: React.FC<{}> = () => {\n  return (\n    <div>\n      <h1>All Blog listing</h1>\n    </div>\n  );\n};\n\nexport default AllBlogList;\n
\n

Step 3: Update App.tsx file and create routes to navigate to different pages

\n
import { BrowserRouter, Routes, Route } from \"react-router-dom\";\nimport NavBar from \"./components/NavBar\";\nimport Login from \"./pages/Login\";\nimport SignUp from \"./pages/SignUp\";\nimport Home from \"./pages/Home\";\nimport Blog from \"./pages/Blog\";\nimport AllBlogList from \"./components/bloglist\";\nimport BlogListingCategoryWise from \"./components/blogcategory\";\nimport \"./App.css\";\n\nfunction App() {\n  return (\n    <div>\n      <BrowserRouter>\n        <NavBar />\n        <div>\n          <Routes>\n            <Route path=\"/\" element={<Home />} />\n            <Route path=\"/signin\" element={<Login />} />\n            <Route path=\"/signup\" element={<SignUp />} />\n            <Route path=\"/blog\" element={<Blog />}>\n              <Route path=\"blog\" element={<AllBlogList />} />\n              <Route path=\"javascript\" element={<BlogListingCategoryWise />} />\n            </Route>\n          </Routes>\n        </div>\n      </BrowserRouter>\n    </div>\n  );\n}\n\nexport default App;\n
\n

Nested routes defined for blog page

\n
<Route path=\"/blog\" element={<Blog />}>\n  <Route path=\"blog\" element={<AllBlogList />} />\n  <Route path=\"javascript\" element={<BlogCategory />} />\n</Route>\n
","fields":{"slug":"/react-tutorial-using-react-router6-typescript/"},"frontmatter":{"title":"React tutorial using react router v6 in react typescript with nested routes","date":"April 04, 2023","description":"In this article i will explain you step by step to setup your react typescript project with react router v6","bannerimage":"https://crew-code-images.s3.us-east-1.amazonaws.com/blog_images/React.jpg"}},"previous":{"fields":{"slug":"/react-tutorial-using-react-portals-refs-typescript/"},"frontmatter":{"title":"React tutorial using react portal and refs in typescript","date":"March 30, 2023","bannerimage":"https://crew-code-images.s3.us-east-1.amazonaws.com/blog_images/React.jpg"}},"next":{"fields":{"slug":"/react-tutorial-using-redux-saga-typescript/"},"frontmatter":{"title":"React tutorial using redux saga in react typescript application","date":"April 16, 2023","bannerimage":"https://crew-code-images.s3.us-east-1.amazonaws.com/blog_images/React.jpg"}}},"pageContext":{"id":"72a4892b-edf3-5513-90ce-f24179cc276d","previousPostId":"bc5ca7cf-a9a9-51bf-a020-f308b4061a7a","nextPostId":"a48018e9-44ac-53f0-a03b-da9bde9fb047"}}, "staticQueryHashes": ["3860684146"]}