使用 React 传递动态 url

Question

感谢大家之前在How to pass andretrieve data over the url in React 中为我提供的帮助，我不知道为什么它不起作用，但我决定简化事情，只传递一个字符串而不是一个对象，但它仍然没有被阅读。它没有动态 url，而是仅传递字符串“:i”或“:book.id”或我尝试在 Link 标记中使用的任何值。

应用程序.js

    <Router>
      <div className="App">
        <Header />
        <Switch>
          <Route path="/" component={Main} />
          <Route path='/:i' component={Single} />
        </Switch>
      </div>
    </Router>

Main.js

const Main = () => {
  return (
    <div id="main">
      {data.map((book, i) => {
        return (
          <div key={i} className="squares">
            <img
              src={images[book.picture]}
              className="covers"
              alt="book cover"
            />
            <h3>
///////////////////////!!! HERE !!!/////////////////////////////////////
              **<Link to="/:i">{book.title}</Link>** 
            </h3>

Book.js

const Book = (props) => {

  let id = useParams();
  console.log("1", id); ////logs ':i' 

Answer 1

你不应该Link像这样传递参数。

您传递参数值，例如 id。

<Link to={`/${i}`}>

然后在途中你会收到它

<Switch>
  <Route path="/:id" children={<Child />} />
</Switch>

这是带有示例的文档