如何通过点击按钮加载组件？

Question

我正在创建一个简单的 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>

但是 url lokks 喜欢这样。还有其他方法吗？

Answer 1

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

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

无论您的 ID 值是什么（为了演示，我们假设它在一个名为 id 的变量中），您将使用它来构建您的 URL:

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

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

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

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

如何通过点击按钮加载组件？

How to load a component from a button click in react?

javascript

reactjs

url

onclicklistener

link-to