如何从反应中的按钮单击加载组件？

编程问答 2022-05-21

问题描述

我正在创建一个简单的 React 应用程序。我需要通过单击按钮加载一个组件。当我单击 edit 按钮时，我需要加载编辑组件。我用 <Link> 试过了。但我无法理解如何给出相对路径。这意味着它需要像 http://localhost:3002/viewTicket/603c9a02a2ccd501f45f820e/edit 一样加载它。我需要从 http://localhost:3002/viewTicket/603c9a02a2ccd501f45f820e 加载它。我怎样才能给出相对路径？

App.js

<Provider store={configureStore()}>
      <browserRouter>
        <div className="App">
          <LayoutWrapper>
            <Switch>
              <Route path="/" exact component={Home} />
              <Route path="/viewTicket/:id" exact component={ViewTicket} />
              <Route path="/viewTicket/:id/edit" exact component={EditTicket} />
            </Switch>
          </LayoutWrapper>
        </div>
      </browserRouter>
    </Provider>

Ticket.js

                       <Link to="/viewTicket/:id/edit">
                          <Button size="lg" onClick={this.handleEdit}>
                            <Pencil />
                            &nbsp; Edit
                          </Button>
                        </Link>

enter image description here

但是 url 就像这样。 有没有其他方法可以做到这一点？

解决方法

您忘记在 URL 中包含实际 ID。您只是将用户定向到这个包含“:id”的文字字符串：

<Link to="/viewTicket/:id/edit">

无论您的 ID 值是什么（为了演示，我们假设它位于名为 id 的变量中），您都可以使用它来构建您的网址：

<Link to={`/viewTicket/${id}/edit`}>

顺便说一句，这是一个非常奇怪的结构，可能会导致混淆：

<Link to="/viewTicket/:id/edit">
  <Button size="lg" onClick={this.handleEdit}>

在链接中放置一个按钮意味着您正在尝试同时做两件不同的事情。应该调用 this.handleEdit 吗？还是应该通过链接重定向用户？最好调用单个操作。如果某些逻辑需要在 this.handleEdit before 重定向用户之前发生，然后删除 <Link> 并在之后手动重定向用户（可能使用 useHistory 钩子）执行那个逻辑。

javascriptlink-toonclicklistenerreactjsreactjsurl