如何使用React Router将数据传递到URL以外的其他组件

如何解决如何使用React Router将数据传递到URL以外的其他组件

我正在尝试使用React Router和TypeScript将数据传递到另一个组件。我目前在网址本身中传递了一个标签，但我还需要传递一个与之关联的ID。我不希望路径本身中的id，因为它会泄漏有关我的数据库的信息。我环顾四周，只发现人们通过将其传递给路径来达到目的。

这是带有链接的组件。我想传递movie.id值。我已经省略了将电影数据放入电影中的提取。

    export const MovieCards: React.FC = () => {
      const [movies,setMovies] = useState<Movie[]>([]);     
      return (
        <>
          {movies.map((movie) => (
            <div key={movie.id}>
              <img
                style={{ width: "300px" }}
                src={movie.picture_url}
                alt="movie poster"
              />
              <Link to={`/movie/${movie.slug}`}>{movie.title}</Link>
              <p>{movie.avg.toString().substr(0,4)}</p>
            </div>
          ))}
        </>
      );
    };

这是路由器的组成部分

const App: React.FC = () => {
  return (
    <Router>
      <Route path="/" exact>
        <IndexPage />
      </Route>
      <Route path="/movie/:slug">
        <MoviePage />
      </Route>
    </Router>
  );
};

这是我需要访问movie.id的组件

export const MoviePage: React.FC = () => {
  let { slug } = useParams();
  return (
    <div>
      <div>Movie page</div>
      <div>{slug}</div>
    </div>
  );
};

解决方法

您的Link组件不仅可以传递网址，还可以传递更多信息。通过将属性to的属性object设置为pathname，而不是将路径名设置为string，可以使用它来传递复杂的状态。

    export const MovieCards: React.FC = () => {
      const [movies,setMovies] = useState<Movie[]>([]);     
      return (
        <>
          {movies.map((movie) => (
            <div key={movie.id}>
              <img
                style={{ width: "300px" }}
                src={movie.picture_url}
                alt="movie poster"
              />
              <Link to={{
                pathname: `/movie/${movie.slug}`,state: {
                  id: movie.id,data: movie,}
              }}>{movie.title}</Link>
              <p>{movie.avg.toString().substr(0,4)}</p>
            </div>
          ))}
        </>
      );
    };

在链接到的组件中，传递的状态可用作location的属性。为了获得用于传递状态的正确类型，您需要通过在useLocation上设置泛型来告诉typescript期望什么。

interface PassedState {
  id: number;
  data: Movie;
}

export const MoviePage: React.FC = () => {
  const { slug } = useParams();
  const { state } = useLocation<PassedState>();
  const { id,data } = state;
  return (
    <div>
      <div>Movie page</div>
      <div>{slug}</div>
      <div>{id}</div>
    </div>
  );
};

,

您可以通过<Link>传递数据。它可以解决您不通过URL发送数据的问题。您可以根据需要在对象中传递尽可能多的数据。

<Link to ={{
    pathname: {`/movie/${movie.slug}`},state: {  
        id: movie.id,}
   }} >
 {movie.title}
</Link>

电影ID现在在MoviePage组件处传递。

  export const MoviePage: React.FC = ({  id
}: InferProps<typeof Article.propTypes>) ) => {

      let { slug } = useParams();
      const { id } = state;

      return (
        <div>
          <div>Movie page</div>
          <div>{slug}</div>
          <h1>Id of Movie is : {id}</h1>
        </div>
      );
    };
//Check the id type in type script
Article.propTypes = {
  id: PropTypes.number.isRequired
};