Как изменить текущее имя пути в режиме реального времени на основе значения текстового поля? реагирующий маршрутизатор

Предположим, есть такой маршрут, как <base-url>/search

маршрут определяется как

import { Link, BrowserRouter as Router, Route } from "react-router-dom";
import { useHistory, useLocation } from "react-router-dom";
...
<Router>
  ...
  <Route path="/search/:searchInput">
     <Search />
  </Route>
</Router>

Существует также компонент текстового поля, который использует хук useContext и contextprovider, а onChange он сохраняет текущее значение ввода текстового поля, которое используется компонентом <Search/>.

как вы меняете имя пути в реальном времени на имя ввода поиска? если текстовое поле пустое, по умолчанию должно быть <base-url>/search

например, если вы наберете «lil» в текстовом поле, текущий маршрут или имя пути будут перенаправлены/отображены одновременно на <base-url>/search/lil

если в текстовом поле есть несколько слов или пробелов, таких как «маленький красный», текущий путь будет немедленно отображаться как <base-url>/search/lil%20red

мне нужно использовать реакцию <Link/>?

связанный поток Как обновить URL-адрес страница с использованием поля ввода?, react-router - как изменить URL-адрес

ИЗМЕНИТЬ

import SearchContext from "../Search/context"

const Search = () => {
   const context = useContext(SearchContext)

   // context.searchInput is the value of the textbox provided by context.provider

   useEffect(() => {}, [])

   return (...)
}
export default Search

reactjs react-redux react-router-dom react-router use-context
person Ridhwaan Shakeel    schedule 30.05.2021    source источник
comment
Link полезен, когда вы хотите изменить маршрут на основе того, что пользователь щелкнул что-то, если вы хотите изменить маршрут программно, вы можете использовать useHistory, а затем использовать метод объектов истории push или replace для изменения маршрутов.   -  person Jacob Smit    schedule 31.05.2021
comment
что было бы местом для отправки истории и отражения изменений на странице, так как я добавил редактирование компонента поиска выше? Я новичок в withRouter, useHistory крючке   -  person Ridhwaan Shakeel    schedule 31.05.2021

Ответы (1)


arrow_upward
1
arrow_downward

Это может быть не лучший ответ, но с предоставленной информацией и временем, которое я должен потратить на это, это пример того, как вы можете инициировать обновление маршрута на основе вашего значения контекста.


import SearchContext from "../Search/context"
import { useHistory, useLocation } from 'react-router-dom';

const Search = () => {
    const context = useContext(SearchContext);
    const history = useHistory();
    const location = useLocation();

    // The below use effect will trigger when ever one of the following changes:
    //      - context.searchInput: When ever the current search value updates.
    //      - location.pathname: When ever the current route updates.
    //      - history: This will most likely never change for the lifetime of the app.
    useEffect(() => {
        let basePath = location.pathname;

        // As the available information does not pass a "Base Route" we must calculate it
        // from the available information. The current path may already be a search and
        // duplicate "/search/" appends could be added with out a small amout of pre-processing.
        const searchIndex = basePath.indexOf('/search/');

        // Remove previous "/search/" if found.
        if (searchIndex >= 0) {
            basePath = basePath.substr(0, searchIndex);
        }

        // Calculate new path.
        const newPath = `${basePath}/search/${encodeURI(context.searchInput)}`;

        // Check new path is indeed a new path.
        // This is to deal with the fact that location.pathname is a dependency of the useEffect
        // Changing the route with history.push will update the route causing this useEffect to
        // refire. If we continually push the calculated path onto the history even if it is the
        // same as the current path we would end up with a loop.
        if (newPath !== location.pathname) {
            history.push(newPath);
        }
    }, [context.searchInput, location.pathname, history]);

    return null;
}
person Jacob Smit    schedule 30.05.2021