React-Router v4 <Route render = {...} />コンポーネントが表示されない

Question

私はReact-Router v4の優れた邪魔にならないようにすばやくアプリを操作しようとしています。今私の計画は、入力に基づいて2番目のページを埋め込んだフォームを1つのページだけにすることです。

私は、vCardFormコンポーネントまで、Appコンポーネントを通じてonNameChangeとonEmailChangeの2つの関数を渡そうとしています。この例に従おうとすると、https://github.com/ReactTraining/react-router/issues/4627私のコンポーネントは、render = {...}プロパティを使って読み込まれないことがわかりました。以下は私のコードですが、何か助けていただければ幸いです。

コンポーネント/アプリケーション/ 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; 

コンポーネント/メイン/ 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小道具は、あなたがルート/正確にする必要があることを意味していることに注意してください。あなたのアプリを提供するためにポート3000を使用していると仮定すると、https://localhost:3000/にいる必要があります。