Как сохранить родительский компонент фиксированным и переключать его потомки

Question

Я много искал, но у меня не было решения. Я учусь реагировать, так что извините, если это основной вопрос.

У меня есть компонент под названием search с 3 дочерними элементами. Одним из них является SearchCPF (оно содержит данные для поиска по идентификатору CPF) и 2 дочерних элемента, которые должны отображаться по одному разу. Когда пользователь выполняет поиск CPF, компонент searchResult показывает список данных, если пользователь щелкает ссылку подробно, компонент searchResult должен исчезнуть и показывать компонент searchDetail. Проблема в том, что я не знаю, как переключаться между searchResult и searchDetail компонентами, сохраняя searchCPF фиксированным (этот компонент всегда отображается).

Я должен показывать SearchResult компонент только тогда, когда пользователь выполняет поиск в компоненте searchCPF (То, как я это сделал, searchResult вызывается вместе с searchCPF)

searchCPF:

export default props => (
    <div role='form'>
        <Grid cols='12 9 10'>
            <input id="cpf" className='w-25 form-control'
                placeholder='Type CPF'
                onChange={props.setCPF}
                value={props.cpf}
            />
        </Grid>
        <Grid cols='12 3 2'>
            <IconButton style='primary' icon='search'
                onClick={props.search}>
            </IconButton>
        </Grid>
    </div>
)

search.jsx

export default class Search extends Component {

    constructor() {
        super()
        this.state = { cpf: '', list: []}
        this.search = this.search.bind(this)        
        this.setCPF = this.setCPF.bind(this)         
    }

    setCPF(event) {
    ...
    }


    search(evento) {
       ...
    }

    render() {
        return (
            <div>
                <ContentHeader title='Search' />
                <Content>
                    <Row>
                        <SearchCPF cpf={this.state.cpf}
                            search={this.search}
                            setCPF={this.setCPF}/>

                        <SearchResult list={this.state.list} cpf={this.state.cpf}/>
                    </Row>
                </Content>
            </div>
        )
    }
}

searchResult.jsx

export default props => {

    const renderRows = () => {
        const list = props.list || []

        return list.map(result => (
            <tr key={result.id}>
                <td>{result.info_dispositivo.appName}</td>
               ....
                <td><Link to={`/SearchDetail/${result.id}`}>Detalhar</Link>

                </td>
            </tr>
        ))
    }

    return (
        <div>
            <table className='table'>
                <thead>
                    <tr>
                        <th width="20%">App</th>
                       ...
                    </tr>
                </thead>
                <tbody>
                    {renderRows()}
                </tbody>
            </table>
        </div>
    )
}

searchDetail.jsx экспорт по умолчанию реквизиты => {

    const renderRows = () => {

        const list = props.list || []

        var lista = list.filter(function (l) {
            return l.id == props.id
        })

        return lista.map(consulta => (
            <div>
                <tr key={consulta.id}>
                    <td><b>App</b></td>
                    <td>{consulta.app}</td>
                </tr>                
            </div>

        ))
    }
    return (
        <div>
            <table className='table'>               
                <tbody>
                    {renderRows()}
                </tbody>
            </table>
        </div>
    )
}

index.jsx

ReactDOM.render(
        (
                <Router history={browserHistory}>                        

                        <Route path="/" component={App} >
                                <IndexRoute component={Search} />                                
                                <Route path='/search' component={Search} />
                                <Route path='/searchDetail/:id' component={SearchDetail} />
                                <Route path='/dashboard' component={Dashboard} />
                        </Route>
                </Router>
        ), document.getElementById('app'))

app.jsx

class App extends Component {
    render() {
        return (
            <div className='wrapper'>
                <Header />
                <SideBar />
                <div className='content-wrapper'>
                    {this.props.children}                   
                </div>
                <Footer />
            </div>
        )
    }
}

Answer 1

При условии, что в этом вопросе используется response-router v2, можно использовать приведенный ниже код

<Route path='/' component={App}>
  <IndexRoute component={Search} />
  <Route path='search' component={Search}>
    <Route
      path='searchDetail/:id'
      component={SearchDetail}
    />
    <Route
      path='searchResult'
      component={SearchResult}
    />
  </Route>
  <Route 
    path='dashboard' 
    component={Dashboard} />
</Route>

Поскольку пути 'searchResult' и 'searchDetail /: id' являются суб-маршрутами поиска, компонент 'Поиск' будет отображаться вместе с любым из компонентов 'SearchResult', 'SearchDeatil'.