如何使用React-Router传递location state与URL参数？点击HoverBooks组件链接无响应问题排查

我来帮你一步步排查问题并修正代码，你的核心问题集中在路由路径语法错误、Link属性拼写错误以及state的安全访问这几个点上：

1. 路由路径的语法错误 #

你的App组件中，Book页面的路由路径写错了：

<Route path="/book:/book.Key">

React Router的URL参数格式是/:参数名，这里应该写成/book/:bookKey（:bookKey是自定义的参数名，用来匹配URL中的书籍ID），错误的格式导致路由完全无法匹配点击后的路径，所以跳转无反应。

2. Link组件的属性拼写错误 #

HoverBooks组件中，Link的to对象里的属性名写错了：

pathName: `/book/${book.key}`

正确的属性名是**pathname**（小写n），拼写错误会导致路由无法识别目标路径，这也是跳转无反应的关键原因之一。

3. Book组件中state的安全访问问题 #

当用户直接通过URL访问/book/xxx时，location.state会是undefined，你当前的代码直接解构state: { book }会抛出错误，需要添加可选链或者默认值来处理这种情况。

修正后的完整代码 #

App组件（路由配置）

function App() {
  return (
    <div className="App">
      <Router>
        <Switch>
          {/* 修正路由路径为正确的URL参数格式 */}
          <Route path="/book/:bookKey">
            <Book />
          </Route>
          <Route path="/signin">
            <Signin />
          </Route>
          <Route path="/">
            <Header />
            <Home />
          </Route>
        </Switch>
      </Router>
    </div>
  )
}
export default App

HoverBooks组件（修正Link的属性拼写）

const HoverBooks = ({ ...book }) => {
  const [inHoverBooks, setInHoverBooks] = React.useState(false)
  return (
    <>
      {/* 修正pathName为pathname */}
      <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

Book组件（安全访问state并支持URL参数获取）

import React from 'react'
import { useLocation, useParams } from 'react-router-dom'

const Book = () => {
  const location = useLocation()
  // 用可选链避免state不存在时的错误
  const book = location.state?.book
  // 同时可以通过useParams获取URL中的bookKey，用于直接访问URL时的场景
  const { bookKey } = useParams()

  // 处理无book数据的情况
  if (!book) {
    return <div>加载中...或未找到书籍</div>
  }

  console.log({ book, bookKey })
  return (
    <div key={book.key}>
      <h1>{book.bookName}</h1>
    </div>
  )
}
export default Book

额外说明 #

• URL参数 vs Location State：state是隐式传递的，不会显示在URL中，但直接访问URL时会丢失；而URL参数（bookKey）是显式的，适合用来做页面刷新、分享链接等场景。建议同时支持两种方式：如果有state就用state里的book数据，如果没有就用bookKey去请求接口获取书籍信息。
• Switch组件的匹配顺序：Switch会从上到下匹配第一个符合的路由，所以要把更具体的路由（比如/book/:bookKey）放在通用路由（比如/）的前面，避免被覆盖。

内容的提问来源于stack exchange，提问作者mura1