我正在嘗試使用 React 路由器作為 url 引數將 props 傳遞給組件 Location，但是由于 props.match.params.location 未定義，因此出現型別錯誤。我在 Locations 組件的 url 鏈接中傳遞位置，當我在瀏覽器中單擊此鏈接時，它會使用正確的引數重定向到正確的 url：
http://localhost:3000/locations/tokyo
但是，這會觸發此錯誤：
Uncaught TypeError: Cannot read properties of undefined (reading 'params')
at Location (Location.js:10:1)
應用程式.js：
class App extends React.Component {
render() {
return (
<div className="App">
<AppNavbar />
<Routes>
<Route path="/" element={<Dashboard />} />
<Route path="/stock-levels" element={<StockLevels />} />
<Route path="/locations" element={<Locations />} />
<Route path="/locations/:location" element={<Location />} />
</Routes>
</div>
)
}
}
export default App;
位置.js：
import {Link} from "react-router-dom";
功能位置（）{
const locations = ["tokyo", "location2", "location3", "location4", "location5", "location6", "location7", "location8"]
const locationList = locations.map(location => {
return <div className="location-container">
<Card className="location-card">
<CardTitle><Link to={`/locations/${location}`}>{location}</Link></CardTitle>
</Card>
</div>
})
return (
<>
<h1>Locations</h1>
{locationList}
</>
)
}
export default Locations
位置.js：
function Location(props) {
//Make location equal to the location passed via route
const location = props.match.params.location
return (
<>
<h1>Location</h1>
<h2>{location}</h2>
</>
)
}
export default Location
據我所知，路由的配置方式和鏈接網址：
<Link to={`/locations/${location}`}>
這應該作為道具傳遞。
謝謝你的幫助！
uj5u.com熱心網友回復：
這種格式的問題有點令人困惑，您能否在在線沙箱中分享您的問題？
https://codesandbox.io/ - 很好。
uj5u.com熱心網友回復：
在react-router-domv6 中，不再有任何路由屬性，即history,location和match，取而代之的是 React 鉤子。props.match未定義并在嘗試訪問時引發錯誤props.match.params。
historynavigate通過函式替換物件useNavigationlocation物件通過useLocationmatch通過useMatch鉤子，但params物件 viauseParams是在 v6 中添加的
useParams鉤子是您要訪問location路由引數的內容。
import { useParams } from 'react-router-dom';
...
function Location() {
const { location } = useParams();
return (
<>
<h1>Location</h1>
<h2>{location}</h2>
</>
);
}
uj5u.com熱心網友回復：
我認為您需要使用useParams來訪問引數。
<Routes>
<Route path="/locations/:location" element={<Location />} />
</Routes>
import React from "react"
import { useParams } from "react-router-dom"
export default function Location() {
const { location } = useParams()
return (
<>
<h1>Location</h1>
<h2>{location}</h2>
</>
)
}
原諒間距。
轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/426129.html
標籤：javascript 反应 反应路由器 jsx
上一篇：如何根據下拉選擇顯示或隱藏資料