如何在 <Link to = {}> 中传递值并使用 [react / typescript] 从另一个组件获取它们

Question

我想看看如何使用打字稿在<Link to = {}> 中传递 id。然后在SeriesSection 组件中获取链接的id。

SerieComponent.tsx

import React from 'react';
import { Link } from "react-router-dom";
import Serie from '../../interfaces/Serie/Serie';

type T = {
  serie: Serie
};

const SerieComponent: React.FC<T> = ({ serie: { id, title, sinopsis, poster, rating, year, extra } }) => {
  let channel = extra.map(x => { return x.channel });

  return (
    <Link to={}/>
      <div className="post-2930 movie type-movie status-publish has-post-thumbnail hentry movie_genre-action">
        <div className="movie__poster">
          <br />
          <a className="masvideos-LoopMovie-link masvideos-loop-movie__link movie__link">
            <img width="300" height="450" src={poster} className="movie__poster--image" alt={title} />
            <img width="300" height="450" src={poster} className="movie__poster--image" alt={title} sizes="(max-width: 300px) 100vw, 300px" />
          </a>
        </div>
        <div className="movie__body">
          <div className="movie__info">
            <div className="movie__info--head">
              <div className="movie__meta"><span className="movie__meta--release-year">{year}</span><span className="movie__meta--genre">{channel}</span></div>
              <a className="masvideos-LoopMovie-link masvideos-loop-movie__link movie__link">
                <h3 className="masvideos-loop-movie__title  movie__title">{title}</h3>
              </a>
            </div>
            <div className="movie__short-description">
              <div>
                <p>{sinopsis}</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </Link>

  )
};

export default SerieComponent;

这个组件是我想要获取链接ID的地方。

import React from 'react';

const SerieSection: React.FC = () => {
  return(
    <div>

    </div>
  )
};

export default SerieSection;

如果你注意到我已经提到了路线

<Route exact path="/serie-section/:id" component={SerieSection}></Route>

import React from 'react';
import { Switch, Route, Redirect, Link } from 'react-router-dom';
import { makeStyles } from '@material-ui/core/styles';
import AppBar from '@material-ui/core/AppBar';
import Toolbar from '@material-ui/core/Toolbar';
import Typography from '@material-ui/core/Typography';
import Button from '@material-ui/core/Button';
import IconButton from '@material-ui/core/IconButton';
import MenuIcon from '@material-ui/icons/Menu';
import Home from '../Home/index';
import About from '../About/index';
import Footer from '../Footer/index';
import SerieSection from '../SerieSection/index';
import useStyles from './styles';

require('../../db/index.ts');

const App: React.FC = () => {
  const classes = useStyles();

  return (
    <div className={classes.root}>
      <AppBar position="static">
        <Toolbar>
          <Button component={Link} to="/" color="inherit">Home</Button>
          <Button component={Link} to="/about" color="inherit">About</Button>
        </Toolbar>
      </AppBar>
      <div className="App">
        <Switch>
          <Route exact path="/" component={Home}></Route>
          <Route exact path="/about" component={About}></Route>
          <Route exact path="/serie-section/:id" component={SerieSection}></Route>
          <Redirect to="/" />
        </Switch>
        <Footer/>
      </div>
    </div>
  )
}

export default App;

Answer 1

<Link to={{
  pathName: "/yourpathname",
  someProp:{foo:"bar"}
}}>Your Path</Link>

并且比此链接指向的组件中

console.log("test: ", props.location.someProp)

如果第二个组件是类别忘了this关键字

Answer 2

我必须参考RouteComponentProps

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


interface State {
  id: string;
}

interface Props extends RouteComponentProps<State>{

}

const SerieSection: React.FC<Props> = (props) => {
  let id = props.match.params.id;
  return(
    <div>
    <h1>{id}</h1>
    </div>
  )
};

export default SerieSection;