Как передать маршрутные реквизиты в мой функциональный компонент - PullRequest
Новая
       22

Как передать маршрутные реквизиты в мой функциональный компонент

0 голосов
/ 28 января 2020

Компонент ссылки 

   return (
                      <div key={driver.id}>
                        <Link to={"/drivers/" + driver.id}>
                          <OurStaffList driver={driver} />
                        </Link>
                      </div>

Приложение. js

   <Switch>
      <Route exact path="/" component={HomePage} />
      <Route path="/archived-routes" component={ArchivedRoutes} />
      <Route path="/find-routes" component={FindRoutes} />
      <Route path="/signup" component={SignUp} />
      <Route path="/signin" component={SignIn} />
      <Route path="/drivers/:driver_id" component={DriverProfile} />
    </Switch>

А теперь здесь, в компоненте, где мне нужен идентификатор маршрута, я получаю 'ошибка не распознанные параметры .. «Кто-то может дать мне представление о том, как я могу добавить реквизиты маршрута в компонент, чтобы я мог отобразить правильный профиль драйвера? 

  const DriverProfile = ({ driver, getDrivers }) => {
  useEffect(() => {
    getDrivers();

    // eslint-disable-next-line
  }, []);
  console.log();
  return (
    <div className="col s12">
      <ul className="with-header">
        {driver.drivers &&
          driver.drivers.map(driver => {
            return <DriverProfileList driver={driver} key={driver.id} />;
          })}
      </ul>
    </div>
  );
};

DriverProfile.propTypes = {
  driver: PropTypes.object.isRequired
};

const mapStateToProps = (state, ownProps) => {
  let id = ownProps.match.params.driver_id;
  console.log(id);
  return {
    driver: state.driver
  };
};

1 Ответ

0 голосов
/ 28 января 2020

Вы можете получить доступ ко всем параметрам маршрутизации в компоненте, заключив его в https://reacttraining.com/react-router/core/api/withRouter

...