如何使用 React-Router 传递位置状态和 URL 参数？

Question

当我单击HoverBooks 组件中的链接进入一个新页面时，我可以在Book 组件中呈现book 位置状态，但是当我按下它时没有任何反应。我认为错误在Route:

function App() {
  return (
    <div className="App">
      <Router>
        <Switch>
          <Route path="/book:/book.Key">
            <Book />
          </Route>
          <Route path="/signin">
            <Signin />
          </Route>
          <Route path="/">
            <Header />
            <Home />
          </Route>
        </Switch>
      </Router>
    </div>
  )
}

export default App

import React from 'react'
import { useLocation } from 'react-router-dom'
const Book = () => {
  const {
    state: { book },
  } = useLocation()
  console.log({ book })
  return (
    <div key={book.key}>
      <h1>{book.bookName}</h1>
    </div>
  )
}

export default Book

const HoverBooks = ({ ...book }) => {
  const [inHoverBooks, setInHoverBooks] = React.useState(false)
  return (
    <>
      <Link
        to={{
          pathName: `/book/${book.key}`,
          state: {
            book,
          },
        }}
      >
        <img
          onMouseLeave={() => setInHoverBooks(false)}
          onMouseEnter={() => setInHoverBooks(true)}
          src={book.image}
          key={book.key}
        />
      </Link>
      {inHoverBooks && (
        <div className="hover__containter">
          <h3>{book.bookName}</h3>
          <h2>{book.by}</h2>
          <h2>{book.Narreted}</h2>
          <h2>{book.length}</h2>
          <h2>{book.rating}</h2>
        </div>
      )}
    </>
  )
}
export default HoverBooks

Answer 1

以下是正确的形式，例如/:someName，用URL参数定义路由：

<Route path="/book/:bookKey">
  <Book />
</Route>

下面是为上述路由创建Link 的正确语法：

<Link
  to={{
    pathname: `/book/SOME_BOOK_KEY`, // replace SOME_BOOK_KEY with some value
    state: {
      book,  // e.g. const book = { key: 'js', bookName: 'Learn JavaScript'}
    },
  }}
>
  <img src="some_src" alt="something" />
</Link>

而你 useParams 和 useLocation react-hooks 来访问组件中的“URL 参数”和“位置状态”：

const Book = () => {
  const {
    state: { book },
  } = useLocation()
  const { bookKey } = useParams();

  console.log(book, bookKey) 
  // prints "book" object (from location state) and "bookKey" (from URL params)

  return (
    <div key={book.key}>
      <h1>{book.bookName}</h1>
    </div>
  )
}

我建议您将 typescript 添加到您的 ReactJS 应用程序中。它通过“静态类型检查”帮助您及早发现错误。

Answer 2

使用 react 路由器，您需要像这样将要渲染的组件传递给Route

const ComponentA = (props) => {...}

<Route path="/component-a" component={ComponentA} />

这里是如何链接到组件 a

<Link to="/component-a" >Go to component A</Link>