单击组件导航到另一个页面

问题描述 投票:0回答:1

我正在尝试创建一个带有可点击卡片的页面。每个卡都是一个组件。因此,作为用户,我应该能够单击这些卡之一,它会将您发送到页面“ CareerPage”。但是,我正在努力使链接适用于每张卡。我已经尝试了以下内容。谢谢。

Explore.js(这是所有卡片的页面)

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(定义职业卡组件)

import Explore from '../Explore';

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

export default CareerCard;

CareerPage.js(这是单击卡后我要转到的页面)

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;
javascript reactjs
1个回答
1
投票

我认为您应该使用react-router-dom。

yarn add react-router-dom

现在我们有2个选项。

  1. 只需使用链接标记
  2. 最后一个选项是将onClick事件与]一起使用

    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);
    
  3. 也许您可以从以下链接中了解更多信息:

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

© www.soinside.com 2019 - 2024. All rights reserved.