There are many way to route web calls to our web pages etc. React also comes with it’s own capability, which we can load by running<\/p>\n
\r\nyarn add react-router-dom\r\nyarn add @types\/react-router-dom\r\n<\/pre>\nIf you’ve created your React application using yarn create react-app –typescript<\/em> then go to the index.tsx and edit it to look like this<\/p>\n
\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport '.\/index.css';\r\nimport { BrowserRouter, Route } from 'react-router-dom'\r\nimport * as serviceWorker from '.\/serviceWorker';\r\nimport About from '.\/components\/About';\r\nimport Home from '.\/components\/Home';\r\n\r\nReactDOM.render(( \r\n <BrowserRouter>\r\n <Route exact path="\/home" component={Home} \/>\r\n <Route exact path="\/about" component={About} \/>\r\n <\/BrowserRouter>), \r\n document.getElementById('root'));\r\n\r\nserviceWorker.unregister();\r\n<\/pre>\nNow, let’s create a couple of React components which will act as our routes. Create a folder named components<\/em> off of the root folder and add two files, about.tsx and home.tsx to the folder. The code for each is shown below (and the files should go in the folder src\/components)<\/p>\n
\r\n\/\/ about.tsx\r\n\r\nimport React, { Component } from 'react';\r\n\r\nexport default class About extends Component {\r\n render() {\r\n return (\r\n <div>About<\/div>\r\n );\r\n }\r\n}\r\n<\/pre>\nand <\/p>\n
\r\n\/\/ home.tsx\r\n\r\nimport React, { Component } from 'react';\r\n\r\nexport default class Home extends Component {\r\n render() {\r\n return (\r\n <div>Home<\/div>\r\n );\r\n\r\n }\r\n}\r\n<\/pre>\nWe’re not using the App.* files, so they can be deleted.<\/p>\n
Obviously we can also add a root route, i.e. <\/p>\n
\r\n<Route exact path="\/" component={Home} \/>\r\n<\/pre>\n","protected":false},"excerpt":{"rendered":"There are many way to route web calls to our web pages etc. React also comes with it’s own capability, which we can load by running yarn add react-router-dom yarn add @types\/react-router-dom If you’ve created your React application using yarn create react-app –typescript then go to the index.tsx and edit it to look like this […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[243],"tags":[],"class_list":["post-7033","post","type-post","status-publish","format-standard","hentry","category-react"],"jetpack_sharing_enabled":true,"jetpack_featured_media_url":"","_links":{"self":[{"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/posts\/7033","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/comments?post=7033"}],"version-history":[{"count":5,"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/posts\/7033\/revisions"}],"predecessor-version":[{"id":7038,"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/posts\/7033\/revisions\/7038"}],"wp:attachment":[{"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/media?parent=7033"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/categories?post=7033"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/tags?post=7033"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}