Проблемы с React Routing

Question

У меня следующая проблема: у меня есть таблица с некоторыми данными, и в этой таблице есть кнопка «изменить». Теперь у меня есть компонент «Editar» для этого.

Это мое приложение. js.

class App extends React.Component {

  render(){
  return (

<Container style = {{padding:"0",margin:"0"}} fluid>
    
<Row>
  <Col>
      <Router>
          <Switch>
                <Route path = "/dashboard">
                   <Index/>
                </Route>
                <Route path="/solicitud">
                    <Solicitud/>
                </Route>
                <Route path="/reserva">
                   <Reserva />
                </Route>
                <Redirect from =  "/" to="/dashboard" />
          </Switch>
     </Router>

    </Col>
    
  </Row>
 </Container>  

  )
  }}
export default App;

Внутри этого компонента «Индекс» (путь в / dashboard), i приведите следующую таблицу.

This is my "Index" component render function

 
    render(){
    
      return(
        
          
            
             Agregar una Solicitud    Заботы    Резерв    )}}; 

Теперь внутри «Индекса» я создаю таблицы с компонентом «Список», где я создаю кнопку «Редактировать»

Список. js функция рендеринга.

render(){
    var res = this.props.res;


    const lista = this.props.ItemList;
    if (parseInt(res) === 0){
    var todoItems = lista.map((obj) =>

  <tr key={obj.id}>
    <td>{obj.fecha}</td>
    <td> {obj.hora}</td>
   <td> {obj.equipo? "Sí":"No"}</td>
    <td>{obj.equipamiento? "Sí":"No"}</td>
    <td> {obj.sillon?"Sí":"No"}</td>  
    <td> {obj.paciente.rut} </td>
    <td><Button  variant="primary">Aprobar</Button> {''}
/*here i create the path */
    <Router>
        <Route path = "/dashboard/editar">
              <Editar id = {obj.id} fecha = {obj.fecha} hora = {obj.hora} equipamiento = {obj.equipamiento} 
              sillon = {obj.sillon} rut = {obj.paciente.rut} />
         </Route>
   </Router>
/* here i create Editar Button */
    <Button href = "/dashboard/editar" variant="primary">Editar</Button>{' '}
    <Button onClick = {()=>{this.handleDel(obj.id)}} variant="danger">Rechazar Solicitud</Button></td>
  </tr>);
    }
    else if (parseInt(res) === 1){
        var todoItems = lista.map((obj) =>

  <tr key={obj.id}>
    <td>{obj.fecha}</td>
    <td> {obj.hora}</td>
   <td> {obj.equipo? "Sí":"No"}</td>
    <td>{obj.equipamiento? "Sí":"No"}</td>
    <td> {obj.sillon?"Sí":"No"}</td>    
    <td> {obj.paciente.rut} </td>
    <td><Button  onClick = {()=>{this.handleDel(obj.id)}}  variant="primary">Terminar Procedimiento</Button> {''}
    <Button  variant="danger">Cancelar Reserva</Button></td>
  </tr>);
    }
    return (
      <Container>
        <Table striped bordered hover>
        <thead>
    <tr>
      <th>Fecha</th>
      <th>Hora</th>
      <th>Equipo</th>
      <th>Equipamiento</th>
      <th>Sillón</th>
      <th>Rut</th>
      <th>Acciones</th>
    </tr>
  </thead>
  <tbody>
  {todoItems}
</tbody>
</Table>
</Container>
      );
    


}
}

При этом, когда я нажимаю кнопку «Редактировать», этот компонент отображается внутри таблицы, я предполагаю, что это потому, что я создаю путь внутри другого компонента.

введите описание изображения здесь

Я попытался создать путь в своем приложении. js, но я не знаю, как передать параметры компоненту. Извините за столь длинный вопрос.