Как открыть компонент React как новую страницу с помощью кнопки в другом компоненте - PullRequest
Новая
       11

Как открыть компонент React как новую страницу с помощью кнопки в другом компоненте

1 голос
/ 27 апреля 2020

Так что я новичок в React и у меня проблемы с маршрутизацией. Я хочу открыть компонент как новую страницу при нажатии кнопки / ссылки, а не при загрузке компонента под компонентом, содержащим кнопку / ссылку.

Компонент с сегментом связи (опыт. 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>

Компонент, который я хочу открыть на новой странице (список классов. 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;

То, что происходит со мной, это то, что "привет, тест 1, тест 2" из списка классов. js отображается под "текстом наполнителя" в опыте. js , Как получить список классов. js, чтобы открыть как новую страницу? (Для справки у меня есть импортированный список классов, а также Маршрутизатор, Маршрут и Ссылка).

1 Ответ

1 голос
/ 27 апреля 2020

В этом случае вам нужно разместить ClassList и Experience компонент на одном уровне 

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

Теперь вы не получаете Experience содержимое компонента при загрузке ClassList component

...