How do I display a button which direct me to a search page instead of displaying a hyperlink?

Question

Hello dear colleagues,

I have a question based on a project I'm doing in a course I'm rolled.

All of my code is practicaly build, the only thing that I'm with difficulties to implement is a button which I have to display and by clicking this button it'll take me to a search page. I've implemented the link, which appears as a hyperlink in the main page, but it'd be in place of this hyperlink the button.

• My main page is displaying the hyperlink like this (note the hyperlink in the bottom of the page at the right side):

Main Page With Hyperlink

• But, according to the project requirements, the main page would display the button like this (with functionallity to take me to the search page, as the hyperlink does):

Main Page With Button Displayed

Below I show to you part of the codes I've done for the components:

1. Part of App.js code:
   • The beggining of the code:

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: []

    }

• The part with the Route:

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. Part of main page code (Home.js):
   • The beggining of the code:

import React, {Component} from 'react';

import { Link } from 'react-router-dom';

import Book from './Book';

  class Home extends Component {

• The part which displays the link instead of the button:

<div className="open-search">

  <Link to="/search">

   Add a book

  </Link>

</div>

So, I'd need some clarity here, what am I doing wrong in this code?

Please, if you'll need other code parts, please tell me that I put here, but I think these parts are enough for you to help me.

Regards.

Answer 1

You need to wrap your button in Link. See below.

 <div className="open-search">

     <Link to="/search">

        <YourButtonComponent/>

     </Link>

 </div>

By doing this <YourButtonComponent/> is acting the same way that the text Add a Book does. It's wrapped in Link, so clicking on the <YourButtonComponent/> is the same as clicking the Link.