![](/img/trans.png)
[英]'react-router-dom' does not contain an export named 'useParams'
[英]react-router-dom > 6 useParams() inside class component
ShowBookDetails.js
发生错误
错误
ShowBookDetails.js:16 Uncaught TypeError: 无法在 commitLayoutEffectOnFiber (react-dom.development.js:23305:1) 在 commitLayoutMountEffects_complete ( react-dom.development.js:24688:1) commitLayoutEffects_begin (react-dom.development.js:24674:1) commitLayoutEffects (react-dom.development.js:24612:1) commitRootImpl (react-dom.development) .js:26823:1) 在 commitRoot (react-dom.development.js:26682:1) 在 finishConcurrentRender (react-dom.development.js:25981:1) 在 performConcurrentWorkOnRoot (react-dom.development.js:25809: 1) 在 workLoop (scheduler.development.js:266:1)
ShowBookDetails.js
import React, {Component} from 'react';
import {Link} from 'react-router-dom';
import axios from "axios";
class ShowBookDetails extends Component {
constructor(props) {
super(props);
this.state = {
book: {}
};
}
componentDidMount() {
axios.get('http://localhost:5050/api/books/' + this.props.match.params.id)
.then(res => {
this.setState({
book: res.data
})
})
.catch(err => {
console.log("Error from ShowBookDetails")
})
}
onDeleteClick(id) {
axios
.delete('http://localhost:5050/api/books/' + id)
.then(res => {
this.props.history.push("/");
})
.catch(err => {
console.log("Error form ShowBookDetails_deleteClick");
})
};
render() {
const book = this.state.book;
let BookItem = <div>
<table className={"table table-hover table-striped table-bordered"}>
<thead>
<tr>
<th scope="row">1</th>
<td>Title</td>
<td>{book.title}</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Author</td>
<td>{book.author}</td>
</tr>
<tr>
<th scope="row">3</th>
<td>ISBN</td>
<td>{book.isbn}</td>
</tr>
<tr>
<th scope="row">4</th>
<td>Publisher</td>
<td>{book.publisher}</td>
</tr>
<tr>
<th scope="row">5</th>
<td>Published Date</td>
<td>{book.published_date}</td>
</tr>
<tr>
<th scope="row">6</th>
<td>Description</td>
<td>{book.description}</td>
</tr>
</thead>
</table>
</div>
return (
<div className={"ShowBookDetails"}>
<div className="container">
<div className="row">
<div className="col-md-10 mx-auto">
<Link to="/" className={"btn btn-outline-warning float-left"}>Show Book List</Link>
</div>
<div className="col-md-8 m-auto">
<h1 className="display-4 text-center">Book's Record</h1>
<p className="lead text-center">
View Book's Info
</p>
<hr/>
</div>
</div>
<div>
{BookItem}
</div>
<div className="row">
<div className="col-md-6">
<button type="button" className="btn btn-outline-danger btn-lg btn-block"
onClick={this.onDeleteClick.bind(this, book._id)}>Delete Book
</button>
</div>
<div className="col-md-6">
<Link to={`/edit-book/${book._id}`} className="btn btn-outline-info btn-lg btn-block">
Edit Book
</Link>
</div>
</div>
</div>
</div>
);
}
}
export default ShowBookDetails;
应用程序.js
import React, {Component} from "react";
import {BrowserRouter, Routes, Route} from "react-router-dom";
import './App.css';
import CreateBook from "./components/CreateBook";
import ShowBookList from "./components/ShowBookList";
import ShowBookDetails from "./components/ShowBookDetails";
import UpdateBookInfo from "./components/UpdateBookInfo";
class App extends Component {
render() {
return (
<BrowserRouter>
<Routes>
<Route exact path="/" element={<ShowBookList/>} />
<Route path={'/create-book'} element={<CreateBook/>} />
<Route path={'/edit-book/:id'} element={<UpdateBookInfo/>} />
<Route path={'/show-book/:id'} element={<ShowBookDetails/>} />
</Routes>
</BrowserRouter>
);
}
}
export default App;
您可以使用功能包装,我显示代码:
const WrappedShowBookDetails = props => {
const { id } = useParams();
return <ShowBookDetails id={id} {...props} />;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.