Question

我正在使用materialui库和react-router。在我的顶级组件中，指定了我的路线：

class App extends Component {
  render() {
    const {classes} = this.props;
    return (
      <React.Fragment> 
        <BrowserRouter>
          <Route render={({location}) => (
          <TransitionGroup>
          <CSSTransition
              key={location.key}
              timeout={100}
              classNames="someanimation"
            >
          <Switch location={location}>
               <Route exact path="/" component={HomePage} />
               <Route exact path="/customer/:id" component={CustomerPage} />
               <Route component={ErrorPage} />
             </Switch>
           </CSSTransition>
         </TransitionGroup>
       )} />
        </BrowserRouter>
     </React.Fragment>
    );
  }
}

在我的主页上，有一些按钮对应于某些客户。当我单击按钮时，它现在应该转到具有该客户ID的客户页面。我的主页按钮如下所示：

<Button component={Link} to="/customer/:id">
                      Go To Customer id : {this.props.customer[100]}
                    </Button>

从这里我不确定如何将客户ID从此按钮传递到客户页面？

我的客户页面很简单，如下所示：

const Customer= () => {
    return(
        <div >
            <h3>Customer ID : {somehow get the id that was passed in here}</h3>
        </div>
    )
}

Answer 1

按钮上的to道具需要指定确切的路线URL，而不是路径。像这样：

<Button component={Link} to="/customer/100">

然后如评论中提到的Strahinja Ajvaz一样，您可以在this.props.match.params.id组件中使用Customer来检索该ID

通过按钮将路径参数传递到另一页

1 个答案: