如何使用 react router link v6 传递道具？

Question

我正在尝试做的所有事情把 generateQuestion 函数放在哪里，如果我把它放在 App.js 如何将道具形式 App.js 传递给 Quiz.js

如果你有更好的路由实现和generateQuestion功能欢迎留下你的建议

Answer 1

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

示例：

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 || {};

如何使用 react router link v6 传递道具？

How to pass props using react router link v6?

reactjs

react-router

react-router-dom

react-hooks