如何将路由道具传递到我的功能组件中

Question

链接组件

   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>

现在在我需要路线 id 的组件中，我收到“错误无法识别的参数......”有人可以告诉我如何将路线道具放入组件中，以便我可以呈现正确的驱动程序配置文件吗？

  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
  };
};

由用户 6136000 回答。谢谢

Answer 1

https://reacttraining.com/react-router/core/api/Hooks/useparams

因此，在您的 DriverProfile 功能组件中：

let { driver_id } = useParams();