如何从不同组件中的按钮将 React 组件作为新页面打开答案

【问题标题】：How to open React component as new page from a button in different component如何从不同组件中的按钮将 React 组件作为新页面打开
【发布时间】：2020-04-27 06:06:15
【问题描述】：

所以我是 React 的新手，并且遇到了路由问题。我想在单击按钮/链接时将组件作为新页面打开，而不是在包含按钮/链接的组件下加载组件。

带有链接段的组件（experience.js）：

<div className="experience-desc-wrapper">
  <p> filler text </p>
  <Router>
    <Link to="/classlist">Click this link to see relevant coursework</Link>
    <Route exact path="/classlist" component={ClassList}/>
  </Router>
  </p>
</div>

我想在新页面中打开的组件（classlist.js）：

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

class ClassList extends React.Component {

  render() {
    return ( <
      div >
      hello!
      <
      br / >
      test 1 <
      br / >
      test 2 <
      /div>
    )
  }
}
export default ClassList;

发生在我身上的是来自 classlist.js 的“你好，测试 1，测试 2”显示在 experience.js 的“填充文本”下。如何让 classlist.js 作为新页面打开？（作为参考，我确实导入了类列表以及路由器、路由和链接）。

【问题讨论】：

标签： reactjs react-router react-router-dom

【解决方案1】：

在这种情况下，您需要将 ClassList 和 Experience 组件放在同一级别

<Route exact path="/experience" component={Experience}/>
<Route exact path="/classlist" component={ClassList}/>

现在您在加载 ClassList 组件时不会获得 Experience 组件内容

【讨论】：