How change url with react-router

Question

I have some component

import { RouteComponentProps, withRouter } from 'react-router';
function MySearchComponent({ match, location, history }: RouteComponentProps) {
  const [query, setQuery] = useState<string>('');
  useEffect(() => {
    console.log('all fine!')
    history.replace(`/my_search_page?query=${query}`);
  }, [query]);
  // some code for change query
}

export const MySearch = withRouter(MySearchComponent);

What's wrong? I'd tried to use history.push console.log alter right when query changed, but nothing happend

UPD: Sorry. It was my mistake: my application just doesn't support search-parameters Thanks for your help

console.log() is not called? Could yo put some more code? Are you sure that query changes? — Nacho Zullo
– Nacho Zullo, Commented Sep 23, 2020 at 19:13

Alexey Nazarov · Accepted Answer · 2020-09-23 19:14:00Z

2

In my application I am using useHistory hook

import React, { useEffect } from "react";
import { useHistory } from "react-router-dom";

const Operations = () => {
  const history = useHistory();

  useEffect(() => {
    const res = prepareURLParams(filters);
    history.push(getRouterString("/", res));
  }, [filters]);
}

export default Operations;

answered Sep 23, 2020 at 19:14

Alexey Nazarov

2,3472 gold badges14 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Alexey Nazarov Over a year ago

@NachoZullo I was reading this article medium.com/@Charles_Stover/… and found this text "react-router's built-in withRouter HOC does not re-render components on route change, " Maybe this make sense...

Dmitry Over a year ago

Sorry. It was my mistake: my application just doesn't support search-parameters Thanks for your help

Alexey Nazarov Over a year ago

@Dmitry What kind of application does not support query(search) parameters? Is it mobile application?

Dmitry Over a year ago

@Alexey My web-application is a tiny microservice worked in a large web application. I tried to change url on /blah-blah-blah without search-parameters and it's work fine. Looks like a search-parameters cutting from url in the base component

Collectives™ on Stack Overflow

How change url with react-router

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related