React api路由器无法详细显示数据

Question

我目前正在学习使用路由和 API 调用的 React。如果我需要找到所有 url 并将它们发布在成功的页面上，我有一个 api。但是现在我需要制作一个详细信息页面，我可以在其中显示有关 url 的更多信息。第 1 页就像：收集所有 url 并将它们显示在列表中。第 2 页是如果您单击第 1 页列表中的 url，您将被导航到显示详细对话框的第 2 页。 我完全拥有第 1 页，可以导航到第 2 页，但无法在第 2 页信息/详细信息页面中显示来自 api 的任何数据。我不知道如何使用密钥并获取信息。我尝试了几件事，但没有一个有效。我使用 link.Link 作为键，我需要描述属性、url、api 名称。

这是我的第 1 页：

import React from "react";
import {Link, NavLink} from 'react-router-dom';
import { Detail } from './Detail';

export default class FetchLinks extends React.Component {
    state = {
        loading: true,
        links: [],
    };
    async componentDidMount() {
        const url = "https://api.publicapis.org/entries?category=development";
        const response = await fetch(url);
        const data = await response.json();
        this.setState({links: data.entries, loading: false});
    }
    render() {
        if (this.state.loading) {
            return <div>loading...</div>
        }
        if (!this.state.links.length) {
            return <div>geen links gevonden</div>
        }
        return (
            <div>
                {this.state.links.map(link => (
                    <div key={link.Link}>
                        <ul><li>
                            <p>
                                <NavLink to={`/Detail/${link.Link}`}>
                                    {link.Link}
                                </NavLink>
                            </p>
                        </li></ul>
                    </div>))}
            </div>
        );
    }
}

这是第 2 页：

import React from 'react';
import Content from './Content';

const Detail = () =>{
return(
    <div>
        <h1>Detail Page</h1>
        <p>{this.state.links.Link}</p>
    </div>
)


}
export default Detail();

This is how it should be

Answer 1

因此，如果我理解正确，您的所有数据都在第 1 页，需要将数据传递到第 2 页。为此，您必须像这样编写 NavLink：

 <NavLink to={{
    pathname: `/Detail/${link.Link}`,
    state: link.Link
 }}>
    {link.Link}
 </NavLink>

现在你可以使用 react-router 的 UseLocation 钩子来访问你刚刚传递的这个状态。所以在第 2 页：

    import React from 'react';
    import { useLocation } from "react-router-dom";
    
    const Detail = () =>{
       const location = useLocation();         

       return (
          <div>
             <h1>Detail Page</h1>
             <p>{location.state.link}</p>
          </div>
       );

    }

    export default Detail();

你可以阅读更多关于 react-router hooks here.