我正在尝试将使用来自react-router-dom的Redirect时，在单独的.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

如果我理解正确，你可以按照react-router's documentation给出的例子。

您需要使用几个组件：

• Router，用浏览器的历史来插入react-router
• Link，带领用户到另一条路线。链接可能比按钮更好。您可以将链接设置为按钮的样式
• Route，根据路径定义要渲染的组件