单击时重定向到详细信息页面答案

【问题标题】：Getting redirected to the details Page on Click单击时重定向到详细信息页面
【发布时间】：2020-10-18 21:44:58
【问题描述】：

我正在制作一个简单的 react js 应用程序，它在表格中显示来自 Node js / express 服务器的公司列表。

点击后的每一行都会显示一个模态框，其中包含该公司的一些详细信息，该模态框有两个按钮，一个用于关闭，另一个用于查看公司的全部详细信息。

单击完整详细信息按钮时，我试图将用户重定向到包含公司完整详细信息的其他页面。

我知道我可以将 id 作为 props 传递，然后使用 axios 从端点（“localhost:5000/companies/id”）使用该 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>
    )
}

【问题讨论】：

标签： javascript node.js reactjs express axios

【解决方案1】：

你可以使用 react-router-dom 历史钩子：

首先从 react-router-dom 导入 useHistory

const history = useHistory();

然后你可以在你的按钮中用一个函数 onClick 替换：

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

任何一个 history.replace 都应该工作：

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

在您的案例中，以下页面将是详细信息页面，您可以使用 react-router-dom 中的钩子 useLocation 访问您的详细信息：

首先从 react-router-dom 导入 useLocation

location = useLocation();

访问它：

location.state.details

我希望这对你有用

【讨论】：