将值传递给 useNavigate() react-router-dom 并在重定向的组件中使用它

Question

我正在尝试使用 useNavigate() 将值从一个组件传递到另一个组件。我尝试了我在 Whosebug 上看到的另一个答案，但我在重定向时得到了空白页。

这是我的 TableList.js，其中数据显示为 table 行。

TableList.js

import { TableRow, TableCell } from '@aws-amplify/ui-react';
import { EditOutlined } from "@ant-design/icons";
import { useNavigate } from 'react-router-dom';

const TableList = ({ val }) => {

  let navigate = useNavigate();

  const valuePassing = function (val) {
    navigate("/CRM7Edit", {
      state: val
    })
  };

  return (
    <TableRow> 
            <TableCell>{val.campaignOwner}</TableCell>
            <TableCell>{val.campaignName}</TableCell>
            <TableCell>{val.startDate}</TableCell>
            <TableCell>{val.endDate}</TableCell>
            <TableCell>{val.expectedRevenue}</TableCell>
            <TableCell>{val.budgetedCost}</TableCell>
            <TableCell>{val.actualCost}</TableCell>

            {/* Editing icon */}

            <TableCell>
              <EditOutlined className="buttons-crm9" onClick={valuePassing}/>
            </TableCell>
          </TableRow>
  )
}

export default TableList;

valuePassing() 使用值导航到另一个组件。

CRM7Editable 是我要显示值的组件。

CRM7Editable.js

import { TextField } from "@aws-amplify/ui-react";
import { useLocation } from 'react-router-dom';

export default function CRM7Editable(props) {

  let navigate = useNavigate();
  const { state } = useLocation(); // This one I saw in some other Whosebug answer
  console.log(state);

  return (
    <TextField
      width="400px"
      height="36px"
      position="absolute"
      left="915px"
      top="375px"
      defaultValue={props.location.state.setCampaignOwner} // the value will be given here as a default value
      textAlign="left"
      border="1px SOLID rgba(155.00000596046448,171.00000500679016,198.00000339746475,1)"
      borderRadius="6px"
      padding="0px 0px 0px 10px"
      backgroundColor="rgba(255,255,255,1)"
      {...getOverrideProps(overrides, "View.View[1]")}
    ></TextField>

    <TextField
      width="400px"
      height="36px"
      position="absolute"
      textAlign="left"
      left="240px"
      top="235px"
      defaultValue={props.location.state.setCampaignName}}
      border="1px SOLID rgba(155.00000596046448,171.00000500679016,198.00000339746475,1)"
      borderRadius="6px"
      padding="0px 0px 0px 10px"
      backgroundColor="rgba(255,255,255,1)"
      {...getOverrideProps(overrides, "View.View[3]")}
    ></TextField>
  );

}

在 CRM7Edi 中table 我想将文本字段值设置为从 TableList 数据中获取的默认值。

我的主要 table 代码。这是我使用 TableList 组件的地方。

CRM9New.js

import React, { useEffect, useState } from "react";
import { Table, TableBody, TableRow, TableCell, TableHead } from "@aws-amplify/ui-react";
import { DataStore } from "@aws-amplify/datastore";
import { Campaign } from '../models';
import "../styles/CRM9.css";
import { TableList } from '.';


export default function CRM9New(props) {

  const [ campaigns, setCampaigns ] = useState([]);

    useEffect(() => {
      listingCampaignsModels()
    }, []);

    async function listingCampaignsModels() {
      const apiData = await DataStore.query(Campaign);
      // console.log(apiData);
      setCampaigns(apiData);
    };

  return (
    <Table
      variation="bordered"
      highlightOnHover={true}>

      {/* Table Headings */}

      <TableHead>
        <TableRow>
          <TableCell 
            as="th" 
            fontFamily="Roboto"
            fontSize="16px"
            fontWeight="400"
            color="rgba(105.00000134110451,119.00000050663948,148.000006377697,1)"
          >Campaign Owner</TableCell>
          <TableCell
            as="th" 
            fontFamily="Roboto"
            fontSize="16px"
            fontWeight="400"
            color="rgba(105.00000134110451,119.00000050663948,148.000006377697,1)"
          >Campaign Name</TableCell>
          <TableCell
            as="th" 
            fontFamily="Roboto"
            fontSize="16px"
            fontWeight="400"
            color="rgba(105.00000134110451,119.00000050663948,148.000006377697,1)"
          >Start Date</TableCell>
          <TableCell
            as="th" 
            fontFamily="Roboto"
            fontSize="16px"
            fontWeight="400"
            color="rgba(105.00000134110451,119.00000050663948,148.000006377697,1)"
          >End Date</TableCell>
          <TableCell
            as="th" 
            fontFamily="Roboto"
            fontSize="16px"
            fontWeight="400"
            color="rgba(105.00000134110451,119.00000050663948,148.000006377697,1)"
          >Expected Revenue</TableCell>
          <TableCell
            as="th" 
            fontFamily="Roboto"
            fontSize="16px"
            fontWeight="400"
            color="rgba(105.00000134110451,119.00000050663948,148.000006377697,1)"
          >Budgeted Cost</TableCell>
          <TableCell
            as="th" 
            fontFamily="Roboto"
            fontSize="16px"
            fontWeight="400"
            color="rgba(105.00000134110451,119.00000050663948,148.000006377697,1)"
          >Actual Cost</TableCell>
        </TableRow>
      </TableHead>
      
      {/* TableList */}

      <TableBody>
      {campaigns.map((val, key) => (
        <TableList key={key} val={val}></TableList> // TableList is called here.
      ))}
      </TableBody> 

    </Table>
  );

}

我的App.js

import { CRM7ModifiedNew, CRM6New, CRM8New, CRM9New, CRM7Editable } from './components';
import { BrowserRouter as Router, Route, Routes } from 'react-router-dom';


const App = () => {

  return (

    <Router>
        <Routes>
          <Route path="/" element={<CRM6New />}></Route>
          <Route path="/CRM9" element={<CRM9New />}></Route>
          <Route path="/CRM8" element={<CRM8New />}></Route>
          <Route path="/CRM7" element={<CRM7ModifiedNew />}></Route>
          <Route path="/CRM7Edit" element={<CRM7Editable />}></Route>
        </Routes>
      </Router>

  );

}

export default App;

谁能帮帮我。我只想在导航和显示它们时将值从一个组件传递到另一个组件。

Answer 1

你只需要删除函数的 params，state 将获取你从 props 发送的值。

const valuePassing = function () {
  navigate("/CRM7Edit", {
    state: val
  })
};

将值传递给 useNavigate() react-router-dom 并在重定向的组件中使用它

To pass values into useNavigate() react-router-dom and use it in the redirected component

javascript

reactjs

react-router-dom