Как получить доступ к истории в компоненте, которого нет в списке маршрутизаторов? - PullRequest
Новая
       3

Как получить доступ к истории в компоненте, которого нет в списке маршрутизаторов?

0 голосов
/ 06 февраля 2020

Я знаю, что есть несколько вопросов по этому поводу, но я не могу заставить его работать. Когда я использую useHistory () в компоненте панели поиска, я получил неопределенный в истории. То же самое, когда я пытался получить доступ к history.pu sh через реквизит, потому что панель поиска отсутствует в Routes.jsx. Как я могу программно перейти на другой маршрут из компонента, которого нет в списке маршрутов?

Это мое приложение. js

function App () {
  return (
    <ItemsProvider>
      <div className="App">
        <Header logo={Logo} />
        <main className="container">
          <Routes />
        </main>
      </div>
    </ItemsProvider>
  );
}

Routes.jsx 

export default props => {
  return (
    <BrowserRouter>
      <Switch>
        <Route exact path="/items/:id" component={Item} />
        <Route path="/items" component={Results} />
      </Switch>
    </BrowserRouter>
  );
};

Searchbar.jsx 

export default props => {
  let history = useHistory();

  const handleSubmit = e => {
    e.preventDefault();
    history.push(`/items?q=${document.getElementById('searchBar').value}`);
  };

  return (
    <form className="search col-9" onSubmit={handleSubmit}>
      <input
        type="text"
        id="searchBar"
        placeholder="Nunca deixe de buscar"
        className="search-bar"
      />
      <button className="search-bar--submit">
        <img src={SearchIcon} alt="Search Icon" />
      </button>
    </form>
  );
};

1 Ответ

0 голосов
/ 06 февраля 2020

useHistory () будет использовать контекстный интерфейс реагирования для поиска BrowserRouter (или другого маршрутизатора). Таким образом, BrowserRouter должен быть где-то дальше вверх по дереву компонентов, а сейчас это не так. Я рекомендую удалить Browser Router из Routes.jsx и поместить его в App.jsx. 

// App.jsx
function App () {
  return (
    <BrowserRouter>
      <ItemsProvider>
        <div className="App">
          <Header logo={Logo} />
          <main className="container">
            <Routes />
          </main>
        </div>
      </ItemsProvider>
    </BrowserRouter>
  );
}

// Routes.jsx
export default props => {
  return (
    <Switch>
      <Route exact path="/items/:id" component={Item} />
      <Route path="/items" component={Results} />
    </Switch>
  );
};
...