У меня есть страница результатов в React, и я хотел бы связать каждый результат со страницей сведений, но с динамическими URL-адресами c - PullRequest
Новая
       5

У меня есть страница результатов в React, и я хотел бы связать каждый результат со страницей сведений, но с динамическими URL-адресами c

0 голосов
/ 23 апреля 2020

У меня есть страница результатов в React, все значения извлекаются из внешнего URL через API и затем отображаются. Теперь я хотел бы связать каждый результат элемента со своей страницей сведений, которая, как я понимаю, может быть представлена ​​уникальным шаблоном или компонентом страницы (detailTemplate. js), но URL-адрес должен быть разным для каждого результата. Он динамически рассчитывается как один из атрибутов элемента.

результаты. js

 ....
 <ul>
 {data.map((item) => (
    <li>
     <Link to={item.url}>
         <div>item.name </div>
         <div>item.price</div>
     </Link>
    </li>
  )}
</ul>
...

detailTemplate. js

export const DetailPage= (props) => {

    return (
        <div>
            <h3>
                {props.item.title}
            </h3>
            <div>
                {props.item.description}
            </div>
        </div>
        )
}

Как связать результаты. js с DetailPage, для всех результатов?

1 Ответ

1 голос
/ 23 апреля 2020

Это называется Declarative Routing в реакции. Вы можете легко сделать это с помощью компонента <Route />, подобного этому. В вашем файле App.js вы можете определить свой путь и slug, к которому вы сможете обратиться позже в компоненте, к которому вы переходите. 

function App() {
  return (
    <div className="App">
      <Router>
        <Switch>
        <Route exact path="/" component={Results} />
        <Route path="/detail/:slug" component={Details} />
       </Switch>
     </Router>
    </div>
  );
}

Вы можете указать путь в своем компоненте следующим образом: 

//results.js
<Link
  to={{
    pathname: `/detail/${url}`,
    price:item.price,
    name:item.name
  }}
>
  <div>item.name </div>
  <div>item.price</div>
</Link>;

И в вашем detailTemplate.js вы можете получить доступ к реквизиту вот так. 

export const DetailPage = ({ location }) => {
  console.log(location);
  return (
    <div>
      <h3>{location.price}</h3>
      <div>{location.name}</div>
    </div>
  );
};
...