如何使用反应路由器链接 v6 传递道具？答案

【问题标题】：How to pass props using react router link v6?如何使用反应路由器链接 v6 传递道具？
【发布时间】：2022-07-28 03:06:53
【问题描述】：

我正在尝试将generateQuestion 函数放在哪里，如果我把它放在App.js 如何将 props 从 App.js 传递到 Quiz.js

如果您有更好的路由实现和generateQuestion 功能，请随时留下您的建议

【问题讨论】：

你说你想从 App 传递 props 给 Question，但没有在那里渲染
@Dominic 对不起，我的意思是 Quiz.js
为什么不使用 redux-saga 或 react-toolkit ？纯反应不是一个好的解决方案。

标签： reactjs react-hooks react-router react-router-dom

【解决方案1】：

generateQuestion 回调是异步的，因此您将无法通过Link 发送处于路由状态的数据，但您可以将onClick 处理程序移动到Link 并调用@ 987654325@ click 事件以阻止导航操作，并在获取问题后发出命令式导航。

例子：

import { Link, useNavigate } = 'react-router-dom';

...

const navigate = useNavigate();

...

generateQuestions = async (event) => {
  event.preventDefault();

  try {
    const data = await questionsData();
    const arrData = data.map(element => ({
      ...element,
      id: nanoid(),
    }));

    navigate("/quiz", { state: { questions: arrData } });
  } catch(error) {
    // handle rejected Promise/error/etc...
  }
}

...

<Link to="/quiz" onClick={generateQuestions}>
  <button type="button">
    Start Quiz
  </button>
</Link>
...

在Quiz 组件中使用useLocation 钩子来访问传递的路由状态。

import { useLocation } from 'react-router-dom';

...

const { state } = useLocation();
const { questions } = state || {};

【讨论】：

【解决方案2】：

对于以后的问题，我建议您实际编写代码而不是粘贴图片，以便更容易尝试回答您。

除此之外，我也有类似的情况，我所做的是以下（记住item.document是你要传递的数据的属性）

你从哪里获取数据在我的例子中，我创建了一个新类：

const GetData: React.FunctionComponent<{}> = () => { 
const [information, setInformation] = useState([]);

useEffect(() => {
.
.
//all the request stuff for getting the data
.
.
}

return (
    <div>
        {information.map((item) => (
            <div key={item.id}>
                <Link to="/yourUrl" state={{from:'test', 
                body:`${item.document}`}}> 
                    <div>
                        <h3 >{item.name}</h3>
                        <p>{item.description}</p>
                    </div>
                </Link>
            </div>
        ))}
    </div>
);
}

请记住，.map 是为了以防您希望根据您获得的数据动态创建组件。

您希望在哪里查看和使用传递的数据：

const Impementation: React.FunctionComponent = () => {
const location = useLocation()
const [itemData, setItemData] = React.useState({
   body: '',
})
.
.
.
useEffect(() => {
   .
   .
   .
   if (location.state) {
     let _state = location.state as any
     setItemData(_state)
   }, [itemData]);
   .
   .
   .
 };

您所做的是使用传入的数据设置状态，然后您可以像使用状态一样使用它。

这个视频对我帮助很大 https://www.youtube.com/watch?v=HLwR7fTB_NM&t=689s

【讨论】：