react-router-dom v6 사용다른 구성 요소로 전달 값 탐색

react-router-dom v6 사용다른 구성 요소로 전달 값 탐색

react-router-dom 버전은 v6이며 탐색을 사용하여 값을 다른 구성 요소에 전달하는 데 문제가 있습니다.

선택한 행을 Report라는 다른 페이지로 넘깁니다.하지만 올바른 구문을 사용하고 있는지 모르겠습니다.navigate보고서 구성 요소에서 해당 상태를 가져오는 방법을 알 수 없습니다.

Material-ui 표: 사용하려고 합니다.redirectToReport(rowData)에onClick파라미터를 지정합니다.

function TableRows(props){
return (
    <MaterialTable
        title="Leads"
        columns={[
            ...
        ]}
        data = {props.leads}       
        options={{
            selection: true,
            filtering: true,
            sorting: true
        }}
        actions = {[{
            position: "toolbarOnSelect",
            tooltip: 'Generate a report based on selected leads.',
            icon: 'addchart',
            onClick: (event, rowData) => {
                console.log("Row Data: " , rowData)
                props.redirect(rowData)
            }
        }]}
    />
)}

LeadTable 컴포넌트

export default function LeadTable(props) {
let navigate = useNavigate();

const [leads, setLeads] = useState([]);
const [loading, setLoading] = useState(true);    

async function fetchUrl(url) {
    const response = await fetch(url);
    const json = await response.json();

    setLeads(json[0]);
    setLoading(false);
}

useEffect(() => {
    fetchUrl("http://localhost:5000/api/leads");
}, []);

function redirectToReport(rowData) {
    navigate('/app/report', { state: rowData }); // ??? I'm not sure if this is the right way
}

return(
    <div>
        <TableRows leads={leads} redirect={redirectToReport}></TableRows>
    </div>
)}

보고서 컴포넌트

export default function ReportPage(state) {
return (
    <div>
        { console.log(state) // This doesn't show anything. How to use the state that were passed from Table component here?}
        <div className = "Top3">
          <h3>Top 3 Leads</h3>
            <ReportTop3 leads={[]} />
        </div>
    </div>
);}

버전 6 리액트 도메인

질문에 답변한 것은 알지만 기능 컴포넌트를 사용하고 react-router-dom v6를 사용하여 컴포넌트 간에 데이터를 전달하려는 사용자에게 도움이 될 수 있습니다.

기능적인 컴포넌트가 2개 있다고 합시다.첫 번째 컴포넌트 A와 두 번째 컴포넌트 B입니다.구성 요소 A는 구성 요소 B와 데이터를 공유하려고 합니다.

후크 사용방법: (use Location, use Navigate)

---

import {Link, useNavigate} from 'react-router-dom';

function ComponentA(props) {

  const navigate = useNavigate();

  const toComponentB=()=>{
navigate('/componentB',{state:{id:1,name:'sabaoon'}});
  }

  return (
   <>
<div> <a onClick={()=>{toComponentB()}}>Component B<a/></div>
</>
  );


}


export default ComponentA;

---

이제 컴포넌트 B의 데이터를 가져옵니다.

import {useLocation} from 'react-router-dom';

 function ComponentB() {

    const location = useLocation();
   
        return (

            <>
               
<div>{location.state.name}</div>

            </>
        )
    }

export default ComponentB;

주의: 클래스 컴포넌트에서는 후크가 작동하지 않으므로 클래스 컴포넌트를 사용하는 경우 HOC을 사용할 수 있습니다.

당신의.navigate('/app/report', { state: rowData });맞는 것 같아요.

리액트 리액트

스테이트가 필요한 경우navigate('success', { state }).

항행하다

interface NavigateFunction {
  (
    to: To,
    options?: { replace?: boolean; state?: any }
  ): void;
  (delta: number): void;
}

당신의.ReportPage같은 조건으로 렌더링할 필요가 있다Router미는 부품이 아래에 있는지 확인합니다.

루트 소품은 이제 JSX 리터럴로 전달되므로 렌더링된 구성요소로 더 이상 전달되지 않습니다.루트 스테이트에 액세스 하려면 , 를 개입시켜 액세스 할 필요가 있습니다.useLocation갈고리를 채우다

function ReportPage(props) {
  const { state } = useLocation();
  console.log(state);

  return (
    <div>
      <div className="Top3">
        <h3>Top 3 Leads</h3>
        <ReportTop3 leads={[]} />
      </div>
    </div>
  );
}

컴포넌트가 리액트 훅을 사용할 수 없는 경우에도 커스텀을 통해 루트 상태에 액세스합니다.withRouter상위 컴포넌트여기 간단한 예가 있습니다.withRouterHOC에 패스하다location소품으로서.

import { useLocation, /* other hooks */ } from 'react-router-dom'; 

const withRouter = WrappedComponent => props => {
  const location = useLocation();
  // other hooks

  return (
    <WrappedComponent
      {...props}
      {...{ location, /* other hooks */ }}
    />
  );
};

그런 다음 RRDv6 이전과 같이 소품을 통해 액세스합니다.

class ReportPage extends Component {

  ...

  render() {
    console.log(this.props.location.state);

    return (
      <div>
        <div className="Top3">
          <h3>Top 3 Leads</h3>
          <ReportTop3 leads={[]} />
        </div>
      </div>
    );
  }
}

2가지 사항(제안일 뿐):삼원적인 용도가 아니라 &&

{location && <div>{location.state.name}</div>}

왜 위치를 확인하고 location.state.name을 렌더링합니까?가져올 데이터에 대한 체크를 사용하거나 데이터가 null 또는 당신의 값을 반환하는지 확인합니다.

Sabaoon Bedar's Answer에서 데이터를 표시하기 전에 데이터가 있는지 확인할 수 있습니다.

• 이것 대신에<div>{location.state.name}</div>

• 이렇게 해 주세요.{ location != null ? <div>{location.state.name}</div> : ""}

기능 컴포넌트에서 usenavigate를 사용하여 데이터를 전송하고 싶다면 다음과 같이 사용할 수 있습니다.navigate(`/take-quiz/${id}`, { state: { quiz } }); 이런 use location 훅으로 얻을 수 있습니다.

const location = useLocation();

location.state.quiz가 있습니다.

하지만 이 데이터는 소품으로는 얻을 수 없습니다; 까다로운 부분;!

사바운 베다의 답변에 따르면

from component A: navigate('/', {state:"whatever"} 

in component B: console.log(location.state) //output = whatever

언급URL : https://stackoverflow.com/questions/64566405/react-router-dom-v6-usenavigate-passing-value-to-another-component