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

Question

链接组件

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

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

Answer 1

您可以通过用https://reacttraining.com/react-router/core/api/withRouter包装它来访问组件中的所有路由参数