我在 React 中有一个结果页面，我想 link 每个结果到一个详细页面，但使用动态 URL

Question

我在 React 中有一个结果页面，所有值都是从外部 url 通过 API 获取然后呈现的。现在，我想 link 每个项目结果到其详细信息页面，据我所知，可以由唯一的页面模板或组件呈现 (detailTemplate.js)，但 URL 必须是每个结果不同。它是动态计算的，作为项目属性之一。

results.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>
        )
}

我怎样才能 link 从 results.js 到 DetailPage 的所有结果？

Answer 1

在react中调用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>
  );
};

我在 React 中有一个结果页面，我想 link 每个结果到一个详细页面，但使用动态 URL

I have a results page in React, and I would like to link each result to a detail page but with dynamic URLs

router

reactjs

gatsby