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

Question

我正在尝试创建一个具有可点击卡片的页面。每张卡都是一个组件。因此，作为用户，我应该能够单击其中一张卡，它会将您带到一个页面“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;

Answer 1

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

yarn add react-router-dom

现在我们有两个选择。

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

从‘React’导入react；从“react-router- withRouter(Explore);”导入{ withRouter }；class Explore扩展React.Component { goPage = () => { props.history.push('new uri')；} return ( ... )；}导出默认uri

也许你可以从下面的链接中了解更多：

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