Question

我想通过按链接来导航到具体的子项，例如“ / annotations / 1”，“ / annotations / 12”，但我不知道如何发送ID以从子项中的API获取组件。

我一直在尝试使用Link to =“ / annotationsView”，但是我无法获得单击的注释的具体ID。我想单击批注的名称，然后转到/ annotationView / {annotation ID}，但是我不知道如何发送链接到AnnotationView组件，以便从API中获取数据。

return(
            <div>
                <h2>Anotaciones</h2>
                <div className="form-group">
                    <input type="date"/>
                </div>
                <Table>
                    {annotations.map((ann) =>
                        <div>
                            <tr>
                                <Link to="/annotationView" id={ann.id}>
                                    <th>{ann.name}</th>
                                </Link>
                            </tr>
                            <tr>
                                <td>{ann.text}</td>
                            </tr>
                        </div>
                    )}
                </Table>
            </div>
        )

class AnnotationView extends Component {
    constructor(props) {
        super(props);

        this.state = {
            annotation: [],
            isLoading: false
        }
    }

    componentDidMount() {
        this.setState({isLoading: true});
        console.log(this.props.id);
        fetch("http://localhost:8080/annotations/" + this.props.params.id)
        .then(response => response.json())
        .then(data => this.setState({annotation: data, isLoading: false}));
    }

    render() {
        const { annotation, isLoading } = this.state;
        if(isLoading) {
            return <p>Loading...</p>;
        }

        return(
            <div>
                <h2>Anotacion: { annotation.id }</h2>
                <p>Título: { annotation.name }</p>
                <p>Descripción: { annotation.text } </p>
        </div>
        )
    }
}

您能解释一下如何在Link组件中发送ID或另一种方式吗？

谢谢。

Answer 1

这是一个如何在url中传递参数的示例：

01-09 14:43:51.178 21391-21391/edu.wit.senderp.inventorytrack W/System.err: java.io.FileNotFoundException: edu.wit.senderp.inventorytrack/app/src/main/assets/inventory.json (No such file or directory

例如，转到import React from 'react'; import { render } from 'react-dom'; import { BrowserRouter, Route, Switch } from 'react-router-dom' const Item = ({ match }) => { const { id } = match.params; return <h1>Item {id}</h1> } const App = () => { return ( <BrowserRouter> <Switch> <Route path="/:id" component={Item} /> </Switch> </BrowserRouter> ) } render(<App />, document.getElementById('root'));将显示/2。

实时示例here。

使用react-router导航到具体的孩子

1 个答案: