Skip to content

Commit 66f5f45

Browse files
tienbkutienbku
committed
update for react-router-dom v6
1 parent 6fc3ba6 commit 66f5f45

File tree

5 files changed

+76
-154
lines changed

5 files changed

+76
-154
lines changed

‎README.md‎

Lines changed: 18 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -7,44 +7,44 @@ Build a React Typescript CRUD Application to consume Web API with Hooks and Axio
77
![react-typescript-api-call-example](react-typescript-api-call-example.png)
88

99
For instruction, please visit:
10-
> [React Typescript with API call example using Hooks and Axios](https://bezkoder.com/react-typescript-api-call/)
10+
> [React Typescript with API call example using Hooks and Axios](https://www.bezkoder.com/react-typescript-api-call/)
1111
1212
More Practice:
13-
> [React Typescript (Components) with Axios and API call example ](https://bezkoder.com/react-typescript-axios/)
13+
> [React Typescript (Components) with Axios and API call example ](https://www.bezkoder.com/react-typescript-axios/)
1414
15-
> [(Javascript) React Hooks CRUD example with Axios and Web API](https://bezkoder.com/react-hooks-crud-axios-api/)
15+
> [(Javascript) React Hooks CRUD example with Axios and Web API](https://www.bezkoder.com/react-hooks-crud-axios-api/)
1616
17-
> [React Table example: CRUD App with react-table v7](https://bezkoder.com/react-table-example-hooks-crud/)
17+
> [React Table example: CRUD App with react-table v7](https://www.bezkoder.com/react-table-example-hooks-crud/)
1818
19-
> [React Pagination using Hooks example](https://bezkoder.com/react-pagination-hooks/)
19+
> [React Pagination using Hooks example](https://www.bezkoder.com/react-pagination-hooks/)
2020
21-
> [React Hooks File Upload example](https://bezkoder.com/react-hooks-file-upload/)
21+
> [React Hooks File Upload example](https://www.bezkoder.com/react-hooks-file-upload/)
2222
23-
> [React Hooks: JWT Authentication & Authorization example](https://bezkoder.com/react-hooks-jwt-auth/)
23+
> [React Hooks: JWT Authentication & Authorization example](https://www.bezkoder.com/react-hooks-jwt-auth/)
2424
25-
> [React + Redux + Hooks: JWT Authentication & Authorization example](https://bezkoder.com/react-hooks-redux-login-registration-example/)
25+
> [React + Redux + Hooks: JWT Authentication & Authorization example](https://www.bezkoder.com/react-hooks-redux-login-registration-example/)
2626
27-
Fullstack with Node.js Express:
28-
> [React + Node.js Express + MySQL](https://bezkoder.com/react-node-express-mysql/)
27+
Fullstack with Node Express:
28+
> [React + Node Express + MySQL](https://www.bezkoder.com/react-node-express-mysql/)
2929
30-
> [React + Node.js Express + PostgreSQL](https://bezkoder.com/react-node-express-postgresql/)
30+
> [React + Node Express + PostgreSQL](https://www.bezkoder.com/react-node-express-postgresql/)
3131
32-
> [React + Node.js Express + MongoDB](https://bezkoder.com/react-node-express-mongodb-mern-stack/)
32+
> [React + Node Express + MongoDB](https://www.bezkoder.com/react-node-express-mongodb-mern-stack/)
3333
3434
Fullstack with Spring Boot:
35-
> [React + Spring Boot + MySQL](https://bezkoder.com/react-spring-boot-crud/)
35+
> [React + Spring Boot + MySQL](https://www.bezkoder.com/react-spring-boot-crud/)
3636
37-
> [React + Spring Boot + PostgreSQL](https://bezkoder.com/spring-boot-react-postgresql/)
37+
> [React + Spring Boot + PostgreSQL](https://www.bezkoder.com/spring-boot-react-postgresql/)
3838
39-
> [React + Spring Boot + MongoDB](https://bezkoder.com/react-spring-boot-mongodb/)
39+
> [React + Spring Boot + MongoDB](https://www.bezkoder.com/react-spring-boot-mongodb/)
4040
4141
Fullstack with Django:
42-
> [React.js Hooks + Django Rest Framework](https://bezkoder.com/django-react-hooks/)
42+
> [React Hooks + Django Rest Framework](https://www.bezkoder.com/django-react-hooks/)
4343
4444
Serverless with Firebase:
45-
> [React Firebase Hooks: CRUD App with Realtime Database example](https://bezkoder.com/react-firebase-hooks-crud/)
45+
> [React Firebase Hooks: CRUD App with Realtime Database example](https://www.bezkoder.com/react-firebase-hooks-crud/)
4646
47-
> [React Hooks Firestore example: CRUD App](https://bezkoder.com/react-hooks-firestore/)
47+
> [React Hooks Firestore example: CRUD App](https://www.bezkoder.com/react-hooks-firestore/)
4848
4949
This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).
5050

‎package.json‎

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -10,12 +10,11 @@
1010
"@types/node": "^12.20.15",
1111
"@types/react": "^17.0.13",
1212
"@types/react-dom": "^17.0.8",
13-
"@types/react-router-dom": "^5.1.7",
14-
"axios": "^0.24.0",
13+
"axios": "^0.26.1",
1514
"bootstrap": "^4.6.0",
1615
"react": "^17.0.2",
1716
"react-dom": "^17.0.2",
18-
"react-router-dom": "^5.2.0",
17+
"react-router-dom": "^6.2.2",
1918
"react-scripts": "4.0.3",
2019
"typescript": "^4.3.5",
2120
"web-vitals": "^1.1.2"

‎src/App.tsx‎

Lines changed: 7 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import React from "react";
2-
import { Switch, Route, Link } from "react-router-dom";
2+
import { Routes, Route, Link } from "react-router-dom";
33
import "bootstrap/dist/css/bootstrap.min.css";
44
import "./App.css";
55

@@ -29,11 +29,12 @@ const App: React.FC = () => {
2929
</nav>
3030

3131
<div className="container mt-3">
32-
<Switch>
33-
<Route exact path={["/", "/tutorials"]} component={TutorialsList} />
34-
<Route exact path="/add" component={AddTutorial} />
35-
<Route path="/tutorials/:id" component={Tutorial} />
36-
</Switch>
32+
<Routes>
33+
<Route path="/" element={<TutorialsList/>} />
34+
<Route path="/tutorials" element={<TutorialsList/>} />
35+
<Route path="/add" element={<AddTutorial/>} />
36+
<Route path="/tutorials/:id" element={<Tutorial/>} />
37+
</Routes>
3738
</div>
3839
</div>
3940
);

‎src/components/Tutorial.tsx‎

Lines changed: 8 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,13 @@
11
import React, { useState, useEffect, ChangeEvent } from "react";
2-
import { RouteComponentProps } from 'react-router-dom';
2+
import { useParams, useNavigate } from 'react-router-dom';
33

44
import TutorialDataService from "../services/TutorialService";
55
import ITutorialData from "../types/Tutorial";
66

7-
interface RouterProps { // type for `match.params`
8-
id: string; // must be type `string` since value comes from the URL
9-
}
7+
const Tutorial: React.FC = () => {
8+
const { id }= useParams();
9+
let navigate = useNavigate();
1010

11-
type Props = RouteComponentProps<RouterProps>;
12-
13-
const Tutorial: React.FC<Props> = (props: Props) => {
1411
const initialTutorialState = {
1512
id: null,
1613
title: "",
@@ -32,8 +29,9 @@ const Tutorial: React.FC<Props> = (props: Props) => {
3229
};
3330

3431
useEffect(() => {
35-
getTutorial(props.match.params.id);
36-
}, [props.match.params.id]);
32+
if (id)
33+
getTutorial(id);
34+
}, [id]);
3735

3836
const handleInputChange = (event: ChangeEvent<HTMLInputElement>) => {
3937
const { name, value } = event.target;
@@ -74,7 +72,7 @@ const Tutorial: React.FC<Props> = (props: Props) => {
7472
TutorialDataService.remove(currentTutorial.id)
7573
.then((response: any) => {
7674
console.log(response.data);
77-
props.history.push("/tutorials");
75+
navigate("/tutorials");
7876
})
7977
.catch((e: Error) => {
8078
console.log(e);

0 commit comments

Comments
 (0)