Я пытаюсь добавить компоненты, которые содержатся в отдельных файлах .js на новую страницу при использовании перенаправления с веб-узла реакции-маршрутизатора?

Question

Я разрабатываю простую веб-страницу, в которой есть кнопки для перехода пользователя на вновь загруженную страницу.Я не уверен, как мне сделать так, чтобы компоненты появлялись на этой новой странице.У меня есть отдельные файлы .js для всех компонентов (например, RideForm.js содержит код для отображения функционального выпадающего меню на экране). Например, если я хочу нажать кнопку «Планировать поездку» и получитьновая страница загружена с выпадающим меню там, как я могу добавить это к моему коду?

//PlanButton.js

import React from 'react'
import { Redirect } from 'react-router-dom'
import DropDownMenu from "./DropDownMenu"

class PlanButton extends React.Component {
    state = {
    redirect: false
  }
  setRedirect = () => {
    this.setState({
      redirect: true
    })
  }
  renderRedirect = () => {
    if (this.state.redirect) {
      return <Redirect to='/plan' />

    }
  }
  render () {
    return (
       <div>
        {this.renderRedirect()}
        <button onClick={this.setRedirect}>Plan Your Trip</button>
       </div>
    )
  }
}

export default PlanButton

---------------------------Separate File-----------------------------

//RideForm.js

import React from "react"

class RideForm extends React.Component {
  constructor(props) {
    super(props);
    //beginning option (can be anything)
    this.state = {value: 'Space Mountain'};

    this.handleChange = this.handleChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
  }

  handleChange(event) {
    this.setState({value: event.target.value});
  }

//simply a pop up window to check the result
  handleSubmit(event) {
    alert('Your ride is: ' + this.state.value);
    event.preventDefault();
  }

//set up of the drop down 
  render() {
    return (
      <form onSubmit={this.handleSubmit}>
        <label>
          Pick your ride:
          <select value={this.state.value} onChange={this.handleChange}>
            <option value="Pirates">Pirates</option>
            <option value="Autopia">Autopia</option>
            <option value="Haunted Mansion">Haunted Mansion</option>
            <option value="Space Mountain">Space Mountain</option>
            <option value="Splash Mountain">Splash Mountain</option>
          </select>
        </label>
        <input type="submit" value="Submit" />
      </form>
    );
  }
}

export default RideForm

Answer 1

Если я правильно понимаю, вы можете следовать примеру, приведенному в документации реагирующего маршрутизатора .

Существует несколько компонентов, которые необходимо использовать:

• Router, чтобы подключить react-router к истории браузера

• Link, чтобы привести пользователя к другому маршруту.Ссылка, вероятно, лучше, чем кнопка.Вы можете стилизовать ссылку как кнопку, хотя

• Route, чтобы определить, какой компонент будет отображаться на основе маршрута