如何在 ReactJS 中路由组件答案

【问题标题】：How to Route components in ReactJS如何在 ReactJS 中路由组件
【发布时间】：2020-10-27 02:08:15
【问题描述】：

单击按钮时，我需要路由到页面。我还需要将 prop 值传递给该渲染组件。

单击按钮时需要路由到的组件 = ProcessData

我当前的目录如下所示：

Route.js
src/
   Main.jsx
   ProcessData.jsx

我在根目录中有一个Route.js，如下所示。

<Route path='/banuka/process' component={ProcessData} />

但我的按钮（我用来单击以路由到此ProcessData 组件的按钮位于src 目录内的Main.jsx 内，如下所示：

但是现在我如何将 prop employeeID 传递给 ProcessData 组件，因为它已经在 Route.js 文件中被调用了？

const [employeeID, setEmployeeID] = useState("");

return(
<Link to="/banuka/process">
<Button variant="success">
    Process Data
</Button>
</Link>
);

当单击此按钮并传递props 时，我必须在此Link 或react-router-dom 中呈现ProcessData 组件并传递props？

有人可以帮帮我吗？

【问题讨论】：

标签： reactjs

【解决方案1】：

您可以为此使用反应路由参数或查询字符串。

如果你想使用路由参数。关注这个instruction：

或者查询字符串：使用这个包https://www.npmjs.com/package/query-string和这个instruction

参数示例（简单）：

 <Route path="process/:something" children={<Process />} />

在链接组件中

  <Link to="process/some_information_i_need_to_pass">Click me</Link>

在进程组件中：

  let { something } = React.useParams();

  return (
    <div>
      <h3>Params:: {something}</h3>
    </div>
  );

【讨论】：

谢谢，这很有帮助:)