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

Question

所以我是 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 作为新页面打开？（作为参考，我确实导入了类列表以及路由器、路由和链接）。

标签： reactjsreact-routerreact-router-dom

Answer 1

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

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

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