Jak programowo aktualizować parametry zapytania w routerze reagowania?

Question

Pomocna wskazówka Stackoverflow mówi, że pytanie, które zadaję, wydaje się subiektywne i prawdopodobnie zostanie zamknięte. Nie jestem pewien dlaczego. Nie mogę znaleźć sposobu aktualizowania parametrów zapytania za pomocą routera reagującego bez użycia <Link/>. hashHistory.push (url) nie wydaje się rejestrować parametrów zapytań i nie wydaje się, że możesz przekazać obiekt zapytania lub cokolwiek jako drugi argument.

Jak zmienić adres URL z "/ shop/Clothes/dresses" na "/ shop/Clothes/dresses? Color = blue" w routerze reakcyjnym bez użycia <Link>?

Czy funkcja onChange jest jedynym sposobem na wykrycie zmian w zapytaniu? Dlaczego zmiany zapytania nie są automatycznie wykrywane i reagowane na zmiany w parametrach?

Answer 1

W ramach metody push pod numerem hashHistory można podać parametry zapytania. Na przykład,

history.push({ 
    pathname: '/dresses', 
    search: '?color=blue' 
}) 

lub

history.push('/dresses?color=blue') 

Możesz sprawdzić to repository dodatkowe przykłady dotyczące korzystania history

Answer 2

Od DimitriDushkin on GitHub:

import { browserHistory } from 'react-router'; 

/** 
* @param {Object} query 
*/ 
export const addQuery = (query) => { 
    const location = Object.assign({}, browserHistory.getCurrentLocation()); 

    Object.assign(location.query, query); 
    // or simple replace location.query if you want to completely change params 

    browserHistory.push(location); 
}; 

/** 
* @param {...String} queryNames 
*/ 
export const removeQuery = (...queryNames) => { 
    const location = Object.assign({}, browserHistory.getCurrentLocation()); 
    queryNames.forEach(q => delete location.query[q]); 
    browserHistory.push(location); 
}; 

lub

import { withRouter } from 'react-router'; 
import { addQuery, removeQuery } from '../../utils/utils-router'; 

function SomeComponent({ location }) { 
    return <div style={{ backgroundColor: location.query.paintRed ? '#f00' : '#fff' }}> 
    <button onClick={() => addQuery({ paintRed: 1 })}>Paint red</button> 
    <button onClick={() => removeQuery('paintRed')}>Paint white</button> 
    </div>; 
} 

export default withRouter(SomeComponent); 

Answer 3

Przykład użycia pakietu reaktor-router v4, redux-thunk i re- agent-router-redux (5.0.0-alpha.6).

Gdy użytkownik korzysta z funkcji wyszukiwania, chcę, aby mógł wysłać link do tego samego zapytania do kolegi.

import { push } from 'react-router-redux'; 
import qs from 'query-string'; 

export const search =() => (dispatch) => { 
    const query = { firstName: 'John', lastName: 'Doe' }; 

    //API call to retrieve records 
    //... 

    const searchString = qs.stringify(query); 

    dispatch(push({ 
     search: searchString 
    })) 
}