Changing react route without NavLink

Question

I have two pages. The first one is the homepage and has a search bar. The second one is listing page which shows items which have been searched.

<BrowserRouter>
  <div>
    <ScrollToTop>
      <Route exact path="/" component={Home}/>
      <Route path="/tours/" component={Items}/>
    </ScrollToTop>
  </div>
</BrowserRouter>

in the Items.js, I have another component for search menu.

<SearchOverlayMenu/>

and in SearchOverlayMenu I have a simple form component called SearchOverlayMenuForm like this

<div className="text-right">
  <button onClick={this.handleFormSubmit}>
    <i className="fa fa-search"></i>
  </button>
  <input id="query" className="bfont text-right" name="q" type="search"/>
</div>

my problem is when I type a keyword in the query input and press the submit bottom, I can't use NavLink and I also don't have access to this.history.push(...);

and this is my 'handleformsubmit' function in SearchOverlayMenuForm component:

handleFormSubmit() {
    let query = document.getElementById('query').value;
    console.log(query);
    let newurl = '/tours/?q=' + query;
    this.history.push(newurl);
}

How I can redirect users to target URL?

Possible duplicate of [Programmatically navigate using react router](https://stackoverflow.com/questions/31079081/programmatically-navigate-using-react-router) — Igor Litvinovich, Mar 04 '19 at 08:37
@MonicaAcha how can I set input value into the 'to' field of Link? — Mehran Nouri, Mar 04 '19 at 08:52
this link solved my problem https://stackoverflow.com/questions/39670161/react-router-link-does-not-pass-parameters — Mehran Nouri, Mar 04 '19 at 09:51

score 1 · Answer 1 · answered Jun 24 '22 at 09:39

1

How about if you use useNavigate. It will make you redirect to the target page.

answered Jun 24 '22 at 09:39

HAMMAS BIN SALEEM

11
2

Changing react route without NavLink

1 Answers1