CODEWITHSUNDEEP
javascriptreactjs
Kyler
Kyler

Reputation: 43

Click on a component to navigate to another page

I am trying to create a page with clickable cards. Each of the cards is a component. So, as a user, I should be able to click on one of these cards and it will send you to a page "CareerPage." However, I am struggling to get the links working for each card. I have tried what I have below. Thank you.

Explore.js (This is the page with all of the cards)

import './Explore.css';
import CareerCard from './components/CareerCard.js';
import CareerPage from '..//Career-Pages/CareerPage';

//<Route exact path="/CareerPage" component={CareerPage} />;

class Explore extends React.Component {
    render() {
        const clusters = this.props.clusters.map(cluster => {
            return <CareerCard cluster={cluster} key={cluster.id} />;
        });

        return (
            <div className="background-explorepage">
                <div className="center-background-1">
                    <div className="textbox-1">
                        <h1 className="text1">Explore These Careers</h1>
                    </div>
                    <div className="textbox-2">
                        <h1 className="text2">Click On A Career To Learn More</h1>
                    </div>

                    <div className="career-box">
                        <CareerPage // This is not working here
                        <div className="row1">{clusters}</div>

                        />
                    </div>
                </div>
            </div>
        );
    }
}

export default Explore;

CareerCard.js (This defines the career card component)

import Explore from '../Explore';

class CareerCard extends React.Component {
    render() {
        return <div className="career-card"></div>;
    }
}

export default CareerCard;

CareerPage.js (This is the page I want to go to once a card is clicked)

import React from 'react';
import './CareerPage.css';

function CareerPage() {
    return (
        <div className="background-careerpage">
            <div className="center-background-2">
                <div className="career-name-div">
                    <h1 className="career-name">Career Name</h1>
                </div>

                <div className="career-box-1">
                    <div className="left-side-div">
                        <div className="description-div">
                            <h1 className="description-title">Description</h1>
                            <div className="description-text-div">
                                <p className="description-text">
                                    Lorem Ipsum is simply dummy text of the printing and
                                    typesetting industry. Lorem Ipsum has been the industry's
                                    standard dummy text ever since the 1500s, when an unknown
                                    printer took a galley of type and scrambled it to make a type
                                    specimen book. It has survived not only five centuries, but
                                    also the leap into electronic typesetting, remaining
                                    essentially unchanged. It was popularised in the 1960s with
                                    the release of Letraset sheets containing
                                </p>
                            </div>
                        </div>
                        <div className="day-div">
                            <h1 className="day-title">A Day In The Life</h1>
                            <div className="day-text-div">
                                <p className="day-text">
                                    Lorem Ipsum is simply dummy text of the printing and
                                    typesetting industry. Lorem Ipsum has been the industry's
                                    standard dummy text ever since the 1500s, when an unknown
                                    printer took a galley of type and scrambled it to make a type
                                    specimen book. It has survived not only five centuries, but
                                    also the leap into electronic typesetting, remaining
                                    essentially unchanged. It was popularised in the 1960s with
                                    the release of Letraset sheets containing
                                </p>{' '}
                            </div>
                        </div>
                    </div>
                    <div className="right-side-div">
                        <div className="salary-div">
                            <h1 className="salary-title">Average Salary</h1>
                            <div className="salary-text-div">
                                <p className="salary-text">
                                    Lorem Ipsum is simply dummy text of the printing and
                                    typesetting industry. Lorem Ipsum has been the industry's
                                    standard dummy text ever since the 1500s, when an unknown
                                    printer took a galley of type and scrambled it to make a type
                                    specimen book. It has survived not only five centuries, but
                                    also the leap into electronic typesetting, remaining
                                    essentially unchanged. It was popularised in the 1960s with
                                    the release of Letraset sheets containing
                                </p>
                            </div>
                        </div>

                        <div className="celebrities-div">
                            <h1 className="celebrities-title">Celebrities</h1>
                            <div className="celebrities-text-div">
                                <p className="celebrities-text">
                                    Lorem Ipsum is simply dummy text of the printing and
                                    typesetting industry. Lorem Ipsum has been the industry's
                                    standard dummy text ever since the 1500s, when an unknown
                                    printer took a galley of type and scrambled it to make a type
                                    specimen book. It has survived not only five centuries, but
                                    also the leap into electronic typesetting, remaining
                                    essentially unchanged. It was popularised in the 1960s with
                                    the release of Letraset sheets containing
                                </p>{' '}
                            </div>
                        </div>

                        <div className="classes-div">
                            <h1 className="classes-title">Relevant Classes</h1>
                            <div className="classes-text-div">
                                <p className="classes-text">
                                    Lorem Ipsum is simply dummy text of the printing and
                                    typesetting industry. Lorem Ipsum has been the industry's
                                    standard dummy text ever since the 1500s, when an unknown
                                    printer took a galley of type and scrambled it to make a type
                                    specimen book. It has survived not only five centuries, but
                                    also the leap into electronic typesetting, remaining
                                    essentially unchanged. It was popularised in the 1960s with
                                    the release of Letraset sheets containing
                                </p>{' '}
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    );
}

export default CareerPage;

Upvotes: 1

Views: 65

Answers (1)

Khayankhyarvaa Turmandakh
Khayankhyarvaa Turmandakh

Reputation: 181

I think you should use the react-router-dom.

yarn add react-router-dom

Now we have 2 options.

  1. Just use Link tag

  2. Last options is use onClick event with 

    import React from 'react';
import { withRouter } from "react-router-dom";

class Explore extends React.Component {
  goPage = () => {
    props.history.push('new uri');
  }
  return (
    <div className="career-box-1" onClick ={this.goPage}>
      ...
    </div>
  );
}

export default withRouter(Explore);

Maybe You can learn more from below links:

https://reacttraining.com/react-router/web/guides/quick-start https://reacttraining.com/react-router/web/api/Link

Upvotes: 1

Related Questions