时间戳

首页 > 解决方案 > 使用 react-router 导航到具体的子节点

reactjs - 使用 react-router 导航到具体的子节点

问题描述

我想通过按下链接导航到一个具体的孩子，如“/annotations/1”、“/annotations/12”，但我不知道如何发送 id 以从 Child 组件中的 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 或其他方式吗？

先感谢您。

标签： reactjsreact-router

解决方案

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

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将显示Item 2.

现场示例在这里。

推荐阅读