在 React 路由器 dom 中，我可以在链接中传递道具吗？ [复制]

Question

这个问题在这里已经有了答案：

如何使用反应路由器将数据从一个页面传递到另一个页面4 个答案

2 小时前关闭。

在 React 路由器 dom 中，我可以在链接中传递道具吗？

有没有办法可以将道具传递给 Link 然后只是组件？

我正在尝试在这样的链接中传递道具。

function App(){
    const test = "Hello"
    return(
        <Link to="/detail" test={test}> detail </Link>
    )
}

在我的详细组件中，我可以这样调用。

function detail(){
return(
    <p>{test}</p>
    )   
}

如果这个例子很难理解，我很抱歉，我不知道如何给出正确的例子。

Answer 1

使用state道具你可以如下

使用 React 路由器 - V5

链接的文档参考 - V5

function App(){
    const test = "Hello"
    return(
        <Link to= {{ pathname : "/detail",  state: { test: "dummy"} }}> detail </Link>
    )
}

使用 React 路由器 - V6

链接的文档参考 - V6

function App(){
    const test = "Hello"
    return(
        <Link to= "/detail"  state= {{ test: "dummy" }} > detail </Link>
    )
}

并使用在V5 和 V6中相同的useLocation钩子获取值

在我的详细组件中，我可以这样调用。

function detail(){
const {state} = useLocation();
return(
    <p>{state.test}</p>
    )   
}