怎么做<li>点击 react.js 切换到另一个页面</li>

Question

我必须从 API 获取数据并将其显示为列表，然后当您单击列表中的某个项目时，它应该会将您带到另一个页面，其中包含有关该项目的详细信息。 我不知道如何让 li 元素将我带到另一个包含详细信息的页面

这是我的 app.js

import React, { useState, useEffect } from "react";
import CharacterList from "./Components/CharacterList";
import Navbar from "./Components/Navbar";

function App() {
  const [characters, setCharacters] = useState([]);

  const callBreakingBadAPI = async () => {
    const url = `https://www.breakingbadapi.com/api/characters?name`;
    const resp = await fetch(url);
    const data = await resp.json();
    setCharacters(data);
  };

  useEffect(() => {
    callBreakingBadAPI();
  }, []);

  return (
    <div className="container">
      <Navbar />
      {<CharacterList characters={characters} />}
    </div>
  );
}

export default App;

this is characterList.js
import React from "react";
import CharacterListItem from "./CharacterListItem";

const CharacterList = ({ characters }) => {
  return (
    <section>
      {characters.map((character) => (
        <CharacterListItem character={character} key={character.char_id} />
      ))}
    </section>
  );
};

export default CharacterList;

And this is my CharacterListItem.JS

import React from "react";

const CharacterListItem = ({ character }) => {
  return (
    <ul>
      <li>Name: {character.name}</li>
    </ul>
  );
};

export default CharacterListItem;

我的组件文件夹中有一个 characterinfo 文件夹，其中包含 characterInfo.js，我想在其中切换以显示有关单击项目的详细信息。

Answer 1

您可以将 onClick 处理程序添加到您的li

const history = useHistory()

<li onClick={() => history.push(/* your url */)}>
  Name: {character.name}
</li>

建议不要将onClick侦听器添加到不可交互的 html 元素中以实现可访问性。 如果您仍想添加侦听器，则必须查看如何使元素可访问。 例如，为键盘用户添加tabindex="1"等。

这个用例的最佳元素类型是link （或者在某些情况下， button ）

<li>
  <Link to={/* your url */}>
    Name: {character.name}
  </Link>
</li>

Answer 2

您可以通过链接 state 从CharacterListItem.js发送角色详细信息。

import { Link } from "react-router-dom";

const CharacterList = ({ character }) => {
  return (
      <Link to="/character-info" state={{data: character}}  >Name: {character.name}</Link>
  ); 
};

并且从charactorInfo.js ，可以使用 useLocation 挂钩接收数据。

import { useLocation } from "react-router-dom";

const CharacterInfo = () => {

const location = useLocation();
const character = location.state?.data;

console.log(character);

return (
<div>
  {/* Display character here */}
</div>)
}