Блог

У меня есть onClick обработчик, используемый для фильтрации данных, который перенаправляет обратно к тому же компоненту, но с другим URL. Однако, когда эти же компоненты снова отображаются, я не могу получить доступ props.location .

Для краткости оставлено много кода.

Компонент:

 import { useHistory } from 'react-router-dom';

const Dashboard = (props) => {
  const history = useHistory();
  console.log(props) // Empty
  useEffect(() => {
    console.log(props) // Empty
  })

  const handleFilter = argument => {
    history.push('/filter'); // 'argument' left out to test routing, and to ensure props.location is accessible
  }

  return (
    <button onClick={() => handleFilter('someArgumentHere')}>Filter</button>
  )
}
  

Маршрутизатор:

 import React from 'react';
import {
  BrowserRouter as Router,
  Switch,
  Route,
  Redirect,
} from 'react-router-dom';

const PrivateRoute = ({ exact, path, component: Component }) => {
  return (
    <Route
      exact={exact}
      path={path}
      render={props => (
        <div>
          <Navbar />
          <Component {...props} />
        </div>
      )}
    />
  );
};

<Router>
  <Switch>
    <PrivateRoute exact component={Dashboard} path="/" />
    <PrivateRoute exact component={Dashboard} path="/filteredPriority" />
  </Switch>
</Router>
  

Когда я нажимаю handleFilter , маршрутизация работает. Это означает, что мой браузер переходит от '/' к '/filteredPriority' , и я вижу тот же контент, который требуется. Но, поскольку это фильтр, я хочу получить доступ к параметрам url через props.location , и он пуст. Я не знаю почему.

Понял это. Необходимо обернуть мой Dashboard компонент в withRouter.