How to display a component that is not registered with Route?

Question

React

Good day!
There is a search field in the header and a search button, now I'm trying to change the url on click like this:
window.history.pushState(null, null, '/search');
he is changing!
But this route does not work out the code structure in the App is like this
<Route path="/search" component={SearchResult}/>

<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>

Since the Header does not participate in the routing, I cannot pass it to Search props.history and call a push on it already, and not as it is now directly!
Tell me how to implement that the component would be displayed!

Answer 1

Since the Header does not participate in the routing, I cannot pass it to Search props.history and call a push on it already, and not as it is now directly!

The Header is a child component of the Router component, which means you can use the withRouter HOC which will pass history, location and match to your component.
export default withRouter(Header);