リアクションルータが検索結果表示にランディングビューを変更する

Question

EDIT：表示するコンポーネントを追加

検索の送信ボタンに基づいて正しいページビューを表示しようとしています。現在、私はビューの上部に検索バーがあり、中央にデフォルトのランディングページがあります。ユーザーが検索すると、デフォルトのランディングページを検索しているプロフィールページに変更します。

私は、メインからコンポーネントを削除し、{this.props.children}に置き換える必要があると仮定しています。次に、私は送信ボタンの周りに多分を追加する必要がありますか？これまでの問題は、ProfileがSearchBarから必要なプロップを取得しないということです。

私の見解は理想的には上部とメインコンテナに表示されます。ユーザーの検索は、正しいユーザー情報を含むに変わりますときからに渡される検索 - > - >以下

は私の現在の敗走と主なコンポーネント

import React, { Component } from 'react'; 
import { Router, Route, Redirect, IndexRoute, Link, hashHistory } from 'react-router'; 
import Main from '../components/Main'; 
import Profile from '../components/Profile'; 
import Landing from '../components/Landing'; 


class Routes extends Component { 
    render() { 
     return (
      <Router history={ hashHistory }> 
       <Route path="/" component={Main}> 
       <Route path="Profile" component={Profile}></Route> 
       <Route path="Landing" component={Landing}></Route> 
       <IndexRoute component={Landing}></IndexRoute> 
      </Route> 
      </Router> 
     ) 
    } 
} 

export default Routes; 

メイン

import React, { Component } from 'react'; 
import Routes from '../utils/Routes'; 
import Footer from './Footer'; 
import Profile from './Profile'; 
import SearchBar from './SearchBar'; 
import Landing from './Landing'; 

class Main extends Component { 
    constructor(props) { 
     super(props); 
     this.state = { 
      profileName: '' 
     } 
     } 

     handleProfileChange(profileName) { 
     this.setState({ profileName }); 
     //replace <Profile /> with {this.props.children} maybe 
     } 

    render() { 
     return (
      <div className="container-fluid"> 
       <div className="row"> 
        <SearchBar history={this.props.history} handleProfileChange={this.handleProfileChange.bind(this)} /> 
       </div> 
       <div className="row"> 
        <Profile name={this.state.profileName} /> 
       </div> 
       <div className="row"> 
        <Footer /> 
       </div> 
      </div> 
     ) 
    } 
} 


export default Main; 

です検索バー

import React, { Component, PropTypes } from 'react'; 
import Profile from './Profile'; 
import TopNav from './TopNav'; 
import sass from '../scss/application.scss'; 
import { Router, Route, Redirect, IndexRoute, Link, hashHistory } from 'react-router'; 



class SearchBar extends Component { 
    constructor(props){ 
     super(props) 
      this.state = { 
       name: '' 
      } 
    } 

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

    handleSubmit(e) { 
     e.preventDefault(); 
     console.log("searching for NAME " + this.state.name); 
     let profileName = this.state.name; 
     profileName = profileName.toLowerCase().trim(); 
     //Cap the first letter in the name and add the rest of the name 
     profileName = profileName.charAt(0).toUpperCase() + profileName.substr(1); 
     console.log("NEW NAME " + profileName); 
     this.props.handleProfileChange(profileName); 
     } 

    render() { 
     return (
      <div> 
       <form onSubmit={this.handleSubmit.bind(this)}> 
        <input type="text" placeholder="Enter Name" 
        name="name" 
        value={this.state.name} 
        onChange={this.handleChange.bind(this)} /> 
        <button className="btn btn-success" type="submit">Search</button> 
       </form> 
      </div> 
     ) 
    } 
} 

SearchBar.propTypes = { 
    handleProfileChange: React.PropTypes.func.isRequired, 
} 

export default SearchBar; 

Answer 1

私があなたを理解していれば、ここに基本的なスケッチです間違いなくこれは検索バーとサブミットです。

class SearchProfiles extends Component { 
    static contextTypes = { 
    router: PropTypes.object, 
    }; 

    state = { search: '' }; 

    onSubmit = e => { 
    e.preventDefault(); 
    // maybe do your search here, or inject it directly. 
    this.context.router.push(`/profiles/${this.state.search}`); 
    }; 

    onChange = e => this.setState({ search: e.target.value }); 

    render() { 
    return (
     <form onSubmit={this.onSubmit}> 
     <input onChange={this.onChange} value={this.state.search} /> 
     <button type="submit">Search Profiles</button> 
     </form> 
    ) 
    } 
} 

ただし、検索のルートを追加する必要があります。

<Route path="/profiles/:search" component={Profile} />