我在React中有一个结果页面，我想把每个结果链接到一个详细页面，但是要用动态的URL。

Question

我在React中有一个结果页，所有的值都是通过API从外部的url中获取，然后进行渲染。现在，我想把每个项目结果链接到它的详情页，据我所知，可以通过一个独特的页面模板或组件(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>
        )
}

---

我如何从results.js链接到DetailPage，对于所有的结果？

Answer 1

它被称为 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>
  );
};