小编Ash*_*ang的帖子

React Router useParams 钩子返回空对象

我遇到了 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这应该有效。

reactjs react-router

9
推荐指数
1
解决办法
6567
查看次数

标签 统计

react-router ×1

reactjs ×1