React路由器中的传递状态

Question

所以我面临的问题是，当我点击Hover Books组件中的链接进入一个新页面时，我可以在其中呈现图书状态，但当我按下它时，什么也没有发生。我知道错误可能在哪里（路由）。如果你能帮我修好它，我将不胜感激。谢谢

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

使用react router，您需要将要呈现的组件传递给route，如下所示

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

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

下面是如何链接到组件a

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