React Router не обновляет компонент при изменении параметра url

Question

Я только что реализовал глобальный поиск на своем веб-сайте, и у меня начались проблемы с React-Router. Он не обновляет представление, если URL-адрес изменяет параметры.

Например, переход от /users/454545 к /teams/555555 работает должным образом. Однако переход от /teams/111111 к teams/222222 изменяет URL-адрес, но компонент по-прежнему /teams/111111.

Вот мой код для поля ввода поиска.

const SearchResult = ({ id, url, selectResult, text, type }) => (
    <Row key={id} onClick={() => selectResult(url)} width='100%' padding='5px 15px 5px 15px' style={{cursor: 'pointer'}}>
        <Column  alignItems='flex-start' style={{width: '100%'}}>
            <Label textAlign='left' color='#ffffff'>{text}</Label>
        </Column>
        <Column style={{width: '100%'}}>
            <Label textAlign='right' color='#ffffff'>{type}</Label>
        </Column>
    </Row>
)

const SearchInput = (props) => {
    const { isSearching, name, onChange, onClear, results } = props;

    return (
        <Section width='100%' style={{display: 'flex', position: 'relative'}}>
            <Wrapper height={props.height} margin={props.margin}>
                <i className="fas fa-search" style={{color: 'white'}} />
                <input id='search_input' placeholder={'Search for a team, circuit, or user'} name={name} onChange={onChange} style={{outline: 'none', backgroundColor: 'transparent', borderColor: 'transparent', color: '#ffffff', width: '100%'}} />
                {onClear && !isSearching && <i onClick={onClear} className="fas fa-times-circle" style={{color: '#50E3C2'}} />}
                {isSearching && 
                <Spinner viewBox="0 0 50 50" style={{marginBottom: '0px', height: '50px', width: '50px'}}>
                    <circle
                    className="path"
                    cx="25"
                    cy="25"
                    r="10"
                    fill="none"
                    strokeWidth="4"
                     />
                </Spinner>
                }
            </Wrapper>
            {results && <Section backgroundColor='#00121A' border='1px solid #004464' style={{maxHeight: '400px', position: 'absolute', top: '100%', left: '0px', width: '97%', overflowY: 'scroll'}}>
                <Section backgroundColor='#00121A' style={{display: 'flex', flexDirection: 'column', padding: '15px 0px 0px 0px', justifyContent: 'center', alignItems: 'center', width: '100%'}}>
                    {results.length === 0 && <Text padding='0px 0px 15px 0px' color='#ffffff' fontSize='16px'>We didn't find anything...</Text>}
                    {results.length !== 0 && results.map(r => <SearchResult selectResult={props.selectResult} id={r._id} url={r.url} text={r.text} type={r.type} />)}
                </Section>
            </Section>}
        </Section>
    )
}

export default SearchInput;

Родитель Компонент - это панель навигации, которая выглядит примерно так. Я уменьшил его для удобства чтения.

import React, { useState, useEffect } from 'react';
import { connect } from 'react-redux';

import SearchInput from '../shared/inputs/SearchInput';

const TopNav = (props) => {
    const [search, setSearch] = useState(null);
    const [searchResults, setSearchResults] = useState(null);
    const debouncedSearchTerm = useDebounce(search, 300);
    const [isSearching, setIsSearching] = useState(false);

    function clearSearch() {
        document.getElementById('search_input').value = '';
        setSearchResults(null);
    }

    function searchChange(e) {
        if (!e.target.value) return setSearchResults(null);
        setSearch(e.target.value);
        setIsSearching(true);
    }

    async function updateQuery(query) {
        const data = {
            search: query
        }
        
        const results = await api.search.query(data);

        setSearchResults(results);
        setIsSearching(false);
    }

    function selectResult(url) {
        props.history.push(url);
        setSearchResults(null);
    }

    function useDebounce(value, delay) {
        // State and setters for debounced value
        const [debouncedValue, setDebouncedValue] = useState(value);
      
        useEffect(
          () => {
            // Update debounced value after delay
            const handler = setTimeout(() => {
              setDebouncedValue(value);
            }, delay);
      
            // Cancel the timeout if value changes (also on delay change or unmount)
            // This is how we prevent debounced value from updating if value is changed ...
            // .. within the delay period. Timeout gets cleared and restarted.
            return () => {
              clearTimeout(handler);
            };
          },
          [value, delay] // Only re-call effect if value or delay changes
        );
      
        return debouncedValue;
      }

    useEffect(() => {

        if (debouncedSearchTerm) {
            
            updateQuery(debouncedSearchTerm);
          } else {
            setSearchResults(null);
          }
    }, [user, debouncedSearchTerm])

    return (
        <ContentContainer style={{boxShadow: '0 0px 0px 0 #000000', position: 'fixed', zIndex: 1000}}  backgroundColor='#00121A' borderRadius='0px' width='100%'>
            <Section style={{display: 'flex', justifyContent: 'center', alignItems: 'center', height: '50px'}} width='1200px'>
                <SearchInput height={'30px'} margin='0px 20px 0px 0px' isSearching={isSearching} selectResult={selectResult} onChange={searchChange} onClear={clearSearch} results={searchResults} />
            </Section>
        </ContentContainer>
    )
}

function mapStateToProps(state) {
    return {
        user: state.user.data,
        notifs: state.notifs
    }
}

export default connect(mapStateToProps, { logout, fetchNotifs, updateNotifs })(TopNav);

Tl; DR

Использование response-router для навигации по сайту. Не обновляет компонент при переходе от /teams/111111 к /teams/222222, но обновляет при переходе от /users/111111 к /teams/222222.

Любая помощь приветствуется!

Answer 1

При изменении пути URL-адреса текущий компонент отключается, и монтируется новый компонент, на который указывает новый URL-адрес. Однако при изменении параметра URL, поскольку старый и новый путь URL указывают на один и тот же компонент, отключение-повторное подключение не выполняется. Только уже смонтированный компонент получает новые реквизиты. Можно использовать эти новые реквизиты для получения новых данных и рендеринга обновленного пользовательского интерфейса.

Предположим, ваш идентификатор параметра parameter.

1. С хуками:

   useEffect(() => {
   ... write code to get new data using new prop, also update your state
   },[props.match.params.parameter]);
   

2. С компонентами класса:

   componentDidUpdate(prevProps) {
    if (this.props.match.params.parameter!== prevProps.match.params.parameter) {
    ... write code to get new data using new prop, also update your state
    }
   }
   

3. Используйте KEY:

   Другой подход может заключаться в использовании уникального ключевого свойства . Передача нового ключа приведет к перемонтированию компонента.

   <Route path="/teams/:paramter" render={(props) => (
   <Team key={props.match.params.parameter} {...props} />)
   } />
   

Answer 2

Повторный рендеринг не вызывает повторного монтирования компонента, поэтому используйте ловушку useEffect для вызова инициализирующего logi c в вашем компоненте всякий раз, когда реквизиты меняются, и обновляйте ваше состояние в обратном вызове.

useEffect(() => {
  //Re initialize your component with new url parameter
}, [props]);