带有 React 路由器的 TypeScript

Question

I am new to typescript and react. I am using react-router-dom to create routes in my react app. I can directly use /posts as hardcoded value, but I want to try relative paths to fetch the posts. I have added the code below. Can you please tell me how can I fix type PostsPropsType?

Posts.tsx -

import styles from "./Posts.module.css";
import { Link, RouteComponentProps } from "react-router-dom";
 
export type postType = {
  title: string;
  author: string;
  id: string;
};
 
type PostsPropsType = {
  postsData: postType[];
  postClick: Function;
} & RouteComponentProps;
 
export default function Posts(props: PostsPropsType) {
  const posts = props.postsData.map((post: postType, index: number) => {
    return (
      <Link to={`/${props.match.url}/${post.id}`}>
        <div
          className={styles.Post}
          key={index}
          onClick={() => props.postClick(post.id)}
        >
          <h3>
            <strong>{post.title}</strong>
          </h3>
          <div className={styles.Author}>{post.author}</div>
        </div>
      </Link>
    );
  });
  return <div className={styles.Posts}>{posts}</div>;
}

App.tsx -

import React, { useState, useEffect } from "react";
import styles from "./App.module.css";

import Posts from "../components/Posts/Posts";
import { postType } from "../components/Posts/Posts";
import FullPost from "../components/FullPost/FullPost";
import { fullPostType } from "../components/FullPost/FullPost";
import NewPost from "../components/NewPost/NewPost";
import { BrowserRouter, Link, Route, Switch, Router } from "react-router-dom";

import jpaxios from "../apis/jsonplaceholder.axios";

export default function App(props: {}) {
  let [postsState, setPostsState] = useState<postType[]>();
  let [fullPostState, setFullPostState] = useState<fullPostType>({
    id: "0",
    body: "body",
    title: "Title",
  });

  useEffect(() => {
    jpaxios.get<postType[]>("/posts").then((response) => {
      const postsData = response.data.slice(0, 3);
      const posts = postsData.map((post: postType) => {
        return { title: post.title, author: "katsura", id: post.id };
      });
      setPostsState(posts);
    });
  }, []);

  const fullPostButtonHandler = (id: string) => {
    fullPostState?.id !== id &&
      jpaxios.get<fullPostType>(`/posts/${id}`).then((response) => {
        setFullPostState({
          id: id,
          body: response.data.body,
          title: response.data.title,
        });
      });
  };

  const fullPostDeleteHandler = (id: string) => {
    id !== "0" &&
      setFullPostState({
        id: "0",
        body: "body",
        title: "title",
      });
  };

  let postsElement = <div>Loading...</div>;
  if (postsState) {
    postsElement = (
      <Posts postsData={postsState} postClick={fullPostButtonHandler} />
    );
  }

  return (
    <BrowserRouter>
      <div className={styles.APP}>
        <ul>
          <li>
            <Link to="/new-post">New Post</Link>
          </li>
          <li>
            <Link to="/posts">Posts</Link>
          </li>
          <li>
            <Link to="/full-post">Full Post</Link>
          </li>
        </ul>

        <Switch>
          <Route path="/posts" exact render={() => postsElement} />
          <Route path="/new-post" exact component={NewPost} />
        </Switch>
        <Route
          path={["/full-post", "/posts/:id"]}
          exact
          render={() => (
            <FullPost
              fullPost={fullPostState}
              deleteHandler={fullPostDeleteHandler}
            />
          )}
        />
      </div>
    </BrowserRouter>
  );
}

And the error I am having is -

TypeScript error in /Users/parth/Documents/personal-git/react-playbook/axios-with-hooks/src/containers/App.tsx(54,8):
Type '{ postsData: postType[]; postClick: (id: string) => void; }' is missing the following properties from type 'RouteComponentProps<{}, StaticContext, UnknownFacade>': history, location, match  TS2739

    52 |   if (postsState) {
    53 |     postsElement = (
  > 54 |       <Posts postsData={postsState} postClick={fullPostButtonHandler} />
       |        ^
    55 |     );
    56 |   }
    57 | 

Answer 1

The render prop on Route gets passed the history, location, and match objects. You're currently not forwarding them along to Posts , as required by PostsPropsType . So instead of this:

let postsElement = <div>Loading...</div>;
if (postsState) {
  postsElement = (
    <Posts postsData={postsState} postClick={fullPostButtonHandler} />
  );
}

// ...

render={() => postsElement}

Do this:

render={(routeProps) => (
  postsState ? (
    <Posts {...routeProps} postsData={postsState} postClick={fullPostButtonHandler} />
  ) : (
    <div>Loading...</div>
  )
)}