#javascript #node.js #reactjs #express #axios
#javascript #node.js #reactjs #экспресс #axios
Вопрос:
Я создаю простое приложение 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>
)
}
Ответ №1:
вы могли бы использовать перехваты истории 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
Я надеюсь, что это сработает для вас