如何显示一个按钮，将我引导到搜索页面，而不是显示超链接

Question

各位同事好，

我有一个问题是基于我在一门课程中所做的一个项目。

我所有的代码都是实际构建的，我唯一难以实现的是一个按钮，我必须显示这个按钮，点击这个按钮就会进入搜索页面。我已经实现了链接，它在主页面上显示为超链接，但它会取代这个超链接按钮。

• 我的主页面显示的超链接如下(请注意页面底部右侧的超链接(：

带有超链接的主页

• 但是，根据项目要求，主页面会显示这样的按钮(具有将我带到搜索页面的功能，就像超链接一样(：

显示按钮的主页面

下面我向您展示我为组件所做的部分代码：

1. App.js代码的一部分：
   • 代码的开始：

import React from 'react';
import { Route } from 'react-router-dom';
import Home from './Home';
import Search from './Search';
import * as BooksAPI from './BooksAPI';
import './App.css';
class BooksApp extends React.Component {
state = {
books: []
}

• 路线部分：

render() { 
return (
<div className="app">
<Route exact path="/" render={() => (
<Home 
books={this.state.books}
changeShelf={this.changeShelf}
/>
)} />
<Route path="/search" render={() => (
<Search 
changeShelf={this.changeShelf}
books={this.state.books}
/>
)} />

2. 主页部分代码(Home.js(：
   • 代码的开始：

import React, {Component} from 'react';
import { Link } from 'react-router-dom';
import Book from './Book';
class Home extends Component {

• 显示链接而非按钮的部分：

<div className="open-search">
<Link to="/search">
Add a book
</Link>
</div>

所以，我需要澄清一下，我在这个代码中做错了什么？

请，如果你需要其他代码部分，请告诉我我放在这里，但我认为这些部分足以让你帮助我。

谨致问候。

Answer 1

您需要将按钮包装在Link中。请参见下文。

<div className="open-search">
<Link to="/search">
<YourButtonComponent/>
</Link>
</div>

通过这样做，<YourButtonComponent/>的作用方式与文本Add a Book的作用方式相同。它被封装在Link中，所以单击<YourButtonComponent/>和单击Link是一样的。