Building Web Applications with React and ASP.NET Core/

...

/

Solution: Create a Button That Routes to Another Web Page

Solution: Create a Button That Routes to Another Web Page

Let's explore the solution of creating a button that routes to another web page in our app project.

We'll cover the following...

To solve this challenge, we used React Router to navigate between different pages of your application.

Solution

The code widget below shows the complete solution to the exercise where we added the “Comment here” button that routes to CommentPage.

{
  "name": "frontend",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@emotion/react": "^11.10.6",
    "@emotion/styled": "^11.10.6",
    "@testing-library/jest-dom": "^5.16.5",
    "@testing-library/react": "^13.4.0",
    "@testing-library/user-event": "^13.5.0",
    "@types/jest": "^27.5.2",
    "@types/node": "^16.18.16",
    "@types/react": "^18.0.28",
    "@types/react-dom": "^18.0.11",
    "history": "^5.3.0",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-router-dom": "^6.10.0",
    "react-scripts": "5.0.1",
    "typescript": "^4.9.5",
    "web-vitals": "^2.1.4"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "devDependencies": {
    "eslint-config-prettier": "^8.7.0",
    "eslint-plugin-prettier": "^3.4.1",
    "prettier": "^2.8.4"
  }
}
Implementing button that routes to another webpage

Explanation

The explanation of the solution is as follows:

HomePage.tsx:

...