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

Question

When I click on the link in the HoverBooks Component to get to a new page where I can render the book location state in Book component, but when I press on it nothing happens. I think the error is in 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

Below is the correct form, eg /:someName , to define a route with URL params :

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

And here is the right syntax to make a Link for the above route:

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

And you useParams and useLocation react-hooks to access the "URL params" and "location state" in a component:

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

I would suggest you to add typescript to your ReactJS app. It helps you find errors early by doing "static Type-checking".

Answer 2

With react router you need to pass the component you want to render to the Route like this

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

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

And here is how to link to component a

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