Object literal may only specify known properties, and 'state' does not exist in type &#039-CodePudding

I want to open new tab when click the component in react "react-router-dom": "^6.3.0" follow this docs, this is the code I am using right now:

<Link
      to="/app/cruise/article/detail"
      target="_blank"
      state={record}
    >Detail</Link>

but when I recieve the value like this in the distination page:

const stateData: any = location.state;

the result is undefined. what should I do to recieve the passed value? I have already tried this way:

<Link
      to={{
      pathname: `/app/cruise/article/detail`,
      state: { 
        record: record 
      },
      }}/>

show error like this:

(property) record: API.InterviewListItem
Type '{ pathname: string; state: { record: API.InterviewListItem; }; }' is not assignable to type 'To'.
  Object literal may only specify known properties, and 'state' does not exist in type 'Partial<Path>'.ts(2322)
index.d.ts(53, 5): The expected type comes from property 'to' which is declared here on type 'IntrinsicAttributes & LinkProps & RefAttributes<HTMLAnchorElement>'

this is my detail page to receive the state value:

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

import { connect, Dispatch, IArticleState, Loading } from 'umi';

interface ArticleDetailProps {
  articles: IArticleState
  dispatch: Dispatch
  channelListLoading: boolean
}

const ArticleDetail: React.FC<ArticleDetailProps> = ({articles, dispatch, channelListLoading}) => {

  const location = useLocation();
  const stateData: any = location.state;
  debugger

  React.useEffect(()=>{
    //alert(location);
    debugger
    if(stateData){
      dispatch({
        type: 'articles/getArticleDetail',
        payload: stateData.record.id
      });
    }
  },[]);

  let articleData = articles.data;
  
  return (
   <div>
      <h2>{articleData.title}</h2>
     <div style={{fontSize:'15px'}} dangerouslySetInnerHTML={{__html: articleData.content}} />
   </div>
  );
};


const mapStateToProps = ({articles, loading}: {articles: IArticleState, loading: Loading}) => {
   return {
      articles,
      userListLoading: loading.models.articles
  }
}
const mapDispatchToProps = (dispatch: Dispatch) => {
  return {
      dispatch
  }
}

export default connect(mapStateToProps, mapDispatchToProps)(ArticleDetail);

CodePudding user response：

From what I see in the react router docs page you should pass the state as a property of the object to like this:

<Link
  to={{
    pathname: "/app/cruise/article/detail",
    state: record
  }}
  target="_blank"
>Detail</Link>

Docs: https://v5.reactrouter.com/web/api/Link

CodePudding user response：

For me on the "react-router-dom": "^6.3.0" is working in this way:

I can send the state using:

<Link to={`/url/${genre.id}`}  state={{ key: "value" }} className="list-group-item">

And get using the useLocation() method

const location = useLocation();
console.log(location.state.key)