我遇到了 React Router 没有使用useParams钩子获取参数的问题。当转到路线/view/12345(浏览器路径包括 basename /pending-nominations/view/12345)时,会在console.log()此处记录一个空对象{},它应该在此处显示id例如。{id: 12345}
const SingleRecognition = (props) => {
let params = useParams();
console.log("SingleRecognition -> params", params)
return (
<div>
id:
</div>
);
}
function App() {
return (
<Provider store={store}>
<ThemeProvider theme={theme}>
<Router basename="/pending-nominations">
<PageNav/>
<Switch>
<Route path="/history">
<History/>
</Route>
<Router path="/view/:id">
<SingleRecognition/>
</Router>
<Route path="/">
<PendingRecognitions/>
</Route>
</Switch>
</Router>
</ThemeProvider>
</Provider>
);
}
Run Code Online (Sandbox Code Playgroud)
查看示例https://reacttraining.com/react-router/web/api/Hooks/useparams这应该有效。