Блог

Я создаю простое приложение react js, которое отображает список компаний с сервера Node js / express в виде таблицы.

Каждая строка при нажатии показывает модальную с некоторыми подробностями об этой компании, модальная имеет две кнопки, одна для закрытия, а другая для просмотра полной информации о компании.

Я пытаюсь перенаправить пользователя на другую страницу с полной информацией о компании при нажатии кнопки «Полная информация».

Я знаю, что могу передать идентификатор в качестве реквизита, а затем использовать axios для получения сведений о компании, используя этот идентификатор из конечной точки («localhost: 5000 / companies / id»), Но перенаправление на новую страницу мне незнакомо, поэтому я ценю любую помощь в отношении этого или лучшегоспособ реализации этой функциональности.

Вот код, который я использовал для отображения таблицы :

 import React, { useEffect, useState } from 'react';
import axios from 'axios';
import BootStrapTable from "react-bootstrap-table-next"
import paginationFactory from 'react-bootstrap-table2-paginator';
import {Modal , Button} from "react-bootstrap"

export default function DataTable (){
    const [companies,setCompanies] = useState([]);
    const [modalInfo,setModalInfo] = useState([]);
    const [showModal,setShowModal] = useState(false);
    const [show ,setShow] = useState(false);
    const handleCLose = () => setShow(false)
    const handleShow = () => setShow(true)
    const getCompaniesData = async () =>{
        try{
            const data = await axios.get("http://localhost:5000/companies")
            setCompanies(data.data)
        }
        catch(e){
            console.log(e)
        }
    }
    useEffect(()=>{
        getCompaniesData();
    },[])
    const columns = [
        {dataField:"id",text:"id"},
        {dataField:"name",text:"name"},
     
    ]
    const rowEvents = {
        onClick : (e,row)=>{
            console.log(row)
            setModalInfo(row)
            toggleTrueFalse()
            
        }
    }
    const toggleTrueFalse = () =>{
        setShowModal(handleShow);
    }
    const ModalContent = () =>{
     return (   <Modal show={show} onHide={handleCLose}>
<Modal.Header closeButton>
    <Modal.Title>
        {modalInfo.name}
    </Modal.Title>
</Modal.Header>
<Modal.Body>
<h1 >Company Details :</h1>
<ul>
     <ol>source_id : {modalInfo.source_id}</ol>
     <ol>source_name : {modalInfo.source_name}</ol>
     <ol>name : {modalInfo.name}</ol>
     <ol>website : {modalInfo.website}</ol>
     <ol>email : {modalInfo.email}</ol>
     <ol>phone : {modalInfo.phone}</ol>
     <ol>postal_code : {modalInfo.postal_code}</ol>
     <ol>city : {modalInfo.city}</ol>
     <ol>country : {modalInfo.country}</ol>
</ul>
</Modal.Body>
<Modal.Footer>
<Button variant="secondary" onClick={handleCLose}>Full Details</Button>
    <Button className="btn btn-danger" variant="secondary" onClick={handleCLose}>Close</Button>
</Modal.Footer>
        </Modal> )
    }
    return (
        <div>
        <h1 className="text-center">Share-work Data Table</h1>
        <BootStrapTable
        keyField="id"
        data={companies}
        columns={columns}
        pagination={paginationFactory()}
        rowEvents = {rowEvents}
        />
        {show ? <ModalContent/> : null}
        </div>
    )
}

  

вы могли бы использовать перехваты истории react-router-dom:

Сначала импортируйте useHistory из react-router-dom

 const history = useHistory();
  

затем вы можете заменить его функцией onClick в вашей кнопке:

 history.push('yourpath', {details:detail})
  

либо history.replace должен работать:

 history.replace('yourpath', {details:detail})
  

На следующей странице в вашем случае будет страница сведений, на которой вы можете получить доступ к своим данным с помощью hook useLocation из react-router-dom:

Сначала импортируйте useLocation из react-router-dom

 location = useLocation();
  

для доступа к нему:

 location.state.details
  

Я надеюсь, что это сработает для вас