时间戳

首页 > 解决方案 > 如何实现单击后显示下一页的事件？

reactjs - 如何实现单击后显示下一页的事件？

问题描述

我制作了一个名为 NewName 的组件，其中有一个带有文本“New”的按钮。我希望页面转到我制作的第二个组件，称为“ProfileInformation”。

这是包含新按钮的“NewName.js”组件

import React, { Component } from "react";

class NewName extends Component {


render() {
    return ( 
        <div>
            <button>New</button>
        </div>
    )
}
}


export default NewName

这是单击新按钮时我要转到的组件。它还有其他组件。它是“ProfileInformation.js”组件。

import React from 'react'
import UserDetail from "./UserDetail"
import ProfilePicture from "./ProfilePicture"
import UserName from "./UserName"

class ProfileInformation extends React.Component{
    render(){
        return(
            <div>
                <ProfilePicture />
                <UserName />
                <UserDetail />
            </div>
        )
    }
}

export default ProfileInformation

我希望 ProfileInformation 组件在用户点击新按钮后呈现在屏幕中。

标签： reactjseventsaddeventlistener

解决方案

您需要使用 react-router 在页面之间导航。这是官方页面：https ://reacttraining.com/react-router/core/guides/quick-start

推荐阅读