单击 material-ui 表中的一行并重定向到另一个页面答案

【问题标题】：Clicking on a row within a material-ui table and redirecting to another page单击 material-ui 表中的一行并重定向到另一个页面
【发布时间】：2019-02-18 16:33:02
【问题描述】：

我有一个名为 route-names.js 的文件，其条目如下

    export const REVIEW_FORM_URL = '/custom-forms/:customFormId';

我有一个包含几行的 material-ui 表，当我单击其中的行时该行的 id 可以被视为 url 的一部分，它会将我带到一个空白屏幕。

     onClick(form) {
        this.props.history.push(REVIEW_FORM_URL.replace(':customFormId', form.customFormId));

      }

我需要构建一个新页面，该页面将使用该 url 中的值。

我可以在上面的 onClick 代码中的什么位置重定向到新页面以及如何设置？

我的新页面的名称是 tester.js。

【问题讨论】：

标签： javascript reactjs material-ui

【解决方案1】：

由于您使用的是this.props.history，我假设您使用的是某个版本的 React Router。

如果您想在应用程序中转到另一条路线，使用history.push 是一种可能。

如果你在你的历史中推送一些东西，你应该有一个像这样的元素：

<Route path="/theRouteIWantToGoTo/:customFormId" render={<ComponentTester />}

由于您的 tester.js 渲染方法，<ComponentTester /> 在您的代码中呈现您需要的内容。

你能分享更多你的代码吗？

【讨论】：

我对反应完全陌生。我在这个页面上唯一能看到的是这个 import {withRouter} from "react-router-dom";
我的问题是如何修改上面的onClick代码以接受参数并重定向到我想要的页面？
您应该在某处有一个文件，该文件描述了在输入路由时应呈现哪个组件。当您转到 REVIEW_FORM_URL 时，会呈现一些内容（可能是您的桌子）。您需要的是在单击一行时呈现其他内容。为此，您必须在 history 中“推送”一条新路由并渲染另一个满足您需求的组件。