Как отобразить компонент который не прописан у Route?

Question

[arturios571]

Доброго времени суток!
Есть поле поиска в хедере и кнопка поиска, сейчас пытаю по нажатию менять url вот так:
window.history.pushState(null, null, '/search');
он меняется!
Но вот этот роут не отрабатывает
<Route path="/search" component={SearchResult}/>

структура кода в App такая

<Router>
                <div className='app'>
                    <Header onSearch={this.handleSearch}/>
                    <main>
                        <Switch>
                            <Route exact path="/" component={Home}/>
                            <Route path="/search" component={SearchResult}/>
                            <Route path="/registration" component={Registration}/>
                            <Route path="/login" component={Login}/>
                            <Route component={NotFound}/>
                        </Switch>
                    </main>
                </div>
            </Router>

Поскольку Header не участвует в роутинке я не могу от него передать в Search props.history и уже на нем вызвать пуш а не как сейчас на прямую!

Подскажи как реализовать что бы компонент отобразился!

Answer 1

[Антон Спирин]

Поскольку Header не участвует в роутинке я не могу от него передать в Search props.history и уже на нем вызвать пуш а не как сейчас на прямую!

Header является дочерним компонентом компонента Router это значит, что вы можете использовать HOC withRouter, который будет передавать в ваш компонент history, location и match.
export default withRouter(Header);

Comments

[arturios571]

Оно спс больше, а то я уже через

<Route children={({ history }) => (
  <Header onSearch={this.handleSearch} history={history}/>
)}/>

на гавнокодил)!