在 App.js 我有這條路線
<Route exact path='/questions/:questionId'>
<Details />
</Route>
在 HomeListItem.js 我有這個鏈接
<button className='view-poll'>
<Link to={`/questions/${questionId}`}>
View poll
</Link>
在Details.js中我想訪問問題ID,
我嘗試這樣做......
const { questionId } = this.props.match.params;
但我在瀏覽器中出現了這個錯誤型別錯誤:無法設定未定義的屬性(設定“道具”)
我在 Details.js 中使用了 withRouter,它是一個類組件,
import { BrowserRouter as withRouter } from 'react-router-dom';
...
export default withRouter(connect(mapStateToProps)(Details));
uj5u.com熱心網友回復:
BrowserRouter并且withRouter是完全不同的東西。BrowserRouter是一個充當背景關系提供者的反應組件。withRouter是一個函式,它將matchprop附加到你從最近的 parent 給它的組件上BrowserRouter。
目前您正在匯入BrowserRouter為withRouter:
import { BrowserRouter as withRouter } from 'react-router-dom';
您需要匯入withRouter包裝器本身:
import { withRouter } from 'react-router-dom';
這是CodeSandbox上的一個示例,其中“ Test.js ”檔案類似于您的“ Details.js ”檔案。
uj5u.com熱心網友回復:
<Route exact path='/questions/:questionId'>
<Details />
</Route>
在 Details 組件中,使用如下所示的 useParams 鉤子獲取 questionId
import { useParams } from "react-router";
export const Details=(props)=>{
const {questionId} = useParams();
return (
<h1> question Id : {questionId} </h1>
)
}
轉載請註明出處,本文鏈接:https://www.uj5u.com/shujuku/318234.html
標籤:反应
