React-Router v4 <Route render={...} /> 不显示组件

Question

我正在尝试通过一个快速应用程序来工作，以更好地无法避免React-Router V4。现在，我的计划是只需根据输入而填充第二页的一页。

我正在尝试通过应用程序组件传递两个功能，即on NameChange和onemailChange，然后通过vcardform组件传递。在尝试按照此示例进行尝试：https：//github.com/reacttraining/react-router/issues/4627我发现我的组件甚至都不会使用dender = {...}属性加载。以下是我的代码，任何帮助将不胜感激。

组件/app/index.js

import React, { Component } from 'react';
import Header from '../Header';
import Main from '../Main';
import './App.css';
class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      name: '',
      email: ''
    }
    this.onNameChange = this.onNameChange.bind(this);
    this.onEmailChange = this.onEmailChange.bind(this);
  }
  onNameChange(event) {
    this.setState({ name: event.target.value })
  }
  onEmailChange(event) {
    this.setState({ email: event.target.value })
  }
  render() {
    return (
      <div className="App">
        <Header />
        <Main />
      </div>
    );
  }
}
export default App;

组件/main/index.js

import React, { Component } from 'react';
import vCardForm from '../vCardForm';
import { Switch, Route } from 'react-router-dom';
class Main extends Component {
  render() {
    const {
      onNameChange,
      onEmailChange
    } = this.props;
    return (
      <main className="App-intro">
        <Switch>
          <Route exact path='/' render={(props) => (
            <vCardForm />
          )} />
        </Switch>
      </main>
    )
  }
}
export default Main;

组件/vcardform/index.js

import React, { Component } from 'react';
class vCardForm extends Component {
  render() {
    return (
      <form>
        <p>
          <label htmlFor="name">Name: </label>
          <input id="name" type="text" placeholder="Name" />
        </p>
        <p>
          <label htmlFor="email">Email: </label>
          <input id="email" type="text" placeholder="Email" />
        </p>
        <p>
          <button type="submit">Submit</button>
        </p>
      </form>
    )
  }
}
export default vCardForm;

Answer 1

在您的App.js中，您在渲染方法中没有将任何道具传递给<Main />。尝试使用以下方式相同的代码：

<Main onNameChange={this.onNameChange} onEmailChange={this.onEmailChange} />

考虑到先前的评论，您应该利用所有组件。然后，将相同的道具传递到 <Route/>的渲染道具中：

<Route exact path='/' render={(props) => (
   <VCardForm {...props}/>
)} />

还要记住，Route上的exact Prop表示您需要准确地使用/。就像在使用端口3000服务您的应用程序的情况下，您需要使用https://localhost:3000/。