Перейдите к конкретному ребенку, используя реагирующий маршрутизатор

Question

Я хочу перейти к конкретному дочернему элементу, например "/ annotations / 1", "/ annotations / 12", нажав ссылку, но я не знаю, как отправить идентификатор для получения из API в дочернем элементе компонент.

Я пытался использовать Link to = "/ annotationsView", но не могу получить конкретный идентификатор аннотации, на которую щелкнул. Я хотел бы нажать на имя аннотации и перейти к / annotationView / {идентификатор аннотации}, но я не знаю, как отправить компонент Ссылка на 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 или другим способом сделать это?

Заранее спасибо.

Answer 1

Вот пример того, как пройти через параметры в 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.

Живой пример здесь .