Javascript 如何使用React路由器传递位置状态和URL参数？

当我点击

HoverBooks

组件中的链接以进入一个新页面时，我可以在

book

组件中呈现

book

位置状态，但当我按下它时，什么也没有发生。我认为错误在

路线中

：

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

函数应用程序（）{
返回(
)
}
导出默认应用程序
从“React”导入React
从“react router dom”导入{useLocation}
常数书=（）=>{
常数{
国家：{book}，
}=useLocation（）
console.log（{book}）
返回(
{book.bookName}
)
}
导出默认书本
常数HoverBooks=（{…book}）=>{
常量[InhorBooks，SetInhorBooks]=React.useState（false）
返回(
{inHoverBooks&&(
{book.bookName}
{book.by}
{book.narreed}
{book.length}
{book.rating}
)}
)
}
导出默认悬停簿

使用react router，您需要像这样将要渲染的组件传递到

路由

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

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

const ComponentA=（props）=>{…}

下面是如何链接到组件a

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

转到组件A
下面是使用URL参数定义路由的正确形式，例如
/：someName
：

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

您可以使用和react钩子访问组件中的“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>
  )
}

constbook=（）=>{
常数{
国家：{book}，
}=useLocation（）
const{bookKey}=useParams（）；
console.log（book，bookKey）
//打印“book”对象（来自位置状态）和“bookKey”（来自URL参数）
返回(
{book.bookName}
)
}

我建议您添加到您的ReactJS应用程序。它通过“静态类型检查”帮助您尽早发现错误。
不确定this@mura1它的哪一部分？还是一样，我甚至不能在控制台上显示book对象我希望它能工作，或者这个我认为TypeScript是关于“使用”，而不是“学习”。你“使用”TS，你就学会了“JS”。例如：
const i=10
是JS，但
const i:number=10
是TS。我建议继续学习JS并开始使用TS。检查，您可以在最多学习1天后开始使用它。所以，这并不难。谢谢你，好心的先生
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>
  )
}