如何使用 React-Router 傳遞位置 state 和 URL 參數？

Question

當我單擊HoverBooks組件中的鏈接進入一個新頁面時，我可以在Book組件中呈現book位置 state，但是當我按下它時沒有任何反應。 我認為錯誤在於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

下面是使用URL 參數定義路由的正確形式，例如/:someName ：

<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>

並且您使用Params和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

使用反應路由器，您需要像這樣將要渲染的組件傳遞給Route

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

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

這里是如何鏈接到組件 a

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