검색 라우터보기 방문 결과보기 변경

Question

편집 : 추가 된 구성 요소보기

검색에서 제출 단추를 기반으로 올바른 페이지보기를 렌더링하려고합니다. 현재보기 상단에 검색 창이 있고 중간에 기본 방문 페이지가 있습니다. 사용자가 검색하면 기본 방문 페이지를 검색중인 프로필 페이지로 변경하고 싶습니다.

메인에서 구성 요소를 제거하고 {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} />