Передача параметра маршрута через кнопку на другую страницу - PullRequest
Новая
       13

Передача параметра маршрута через кнопку на другую страницу

0 голосов
/ 01 октября 2018

Я использую библиотеку materialui вместе с реакции-маршрутизатором.В моем компоненте верхнего уровня мои маршруты указаны: 

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

На моей домашней странице есть несколько кнопок, которые соответствуют некоторым клиентам.Когда я нажимаю кнопку, она должна перейти на страницу клиентов с этим идентификатором клиента.Кнопка моей домашней страницы выглядит следующим образом: 

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

Отсюда я не уверен, как теперь передать идентификатор клиента с этой кнопки на страницу клиента?

Моя страница клиента проста и выглядиткак это: 

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

1 Ответ

0 голосов
/ 01 октября 2018

Прописке to на вашей кнопке необходимо указать точный URL-адрес маршрута, а не путь.Так что-то вроде: 

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

Тогда, как упомянул в комментариях Strahinja Ajvaz, вы можете использовать this.props.match.params.id в вашем Customer компоненте, чтобы получить этот идентификатор

...