当使用来自 react-router-dom 的重定向时，我试图将保存在单独的 .js 文件中的组件添加到新页面？

Question

我正在设计一个简单的网页，其中包含用于将用户带到新加载的页面的按钮。我不确定如何让组件出现在这个新页面上。我为所有组件提供了单独的 .js 文件（例如：RideForm.js 包含在屏幕上呈现功能性下拉菜单的代码）因此，例如，如果我想单击按钮 "Plan Your Trip" 和有一个新页面加载了下拉菜单，我该如何将其添加到我的代码中？

//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，引导用户到另一条路线。 link 可能比按钮更好。您可以将 link 样式设置为按钮
Route,定义根据路由渲染哪个组件

当使用来自 react-router-dom 的重定向时，我试图将保存在单独的 .js 文件中的组件添加到新页面？

I am trying to add components that are held in separate .js files to a new page when using Redirect from react-router-dom?

redirect

reactjs

react-router-dom