我正在尝试向我的 React 应用程序添加路由器

Question

我有一个反应组件显示的标题列表，当您单击页面顶部的标题时，将显示帖子的正文。 我有一个组件在不同的组件中显示帖子的正文。

我想创建一个路由器文件，该文件将根据 Posts 标题给出的 id 在 Post 和 Posts 之间切换。

这是我的路线

import React, { memo } from 'react';
import PropTypes from 'prop-types';
import { Route, BrowserRouter } from 'react-router-dom';
import { withRouter } from 'react-router';

import Posts  from './components/posts';
import Post  from './components/post';

// Proptypes definitions to the component.
const propTypes = {
  /** Router location. */
  // eslint-disable-next-line react/forbid-prop-types
  location: PropTypes.object.isRequired,
};

/**
 * Component used to render the app routes.
 *
 * @param {object} props - The component's props.
 * @returns {object} React element.
 */
const Routes = memo(
  (props) => {
    const { location } = props;

    return (
     <BrowserRouter>
  <div>
   <Route path="/" exact component={Posts} />
   <Route path="/post/:id" exact component={Post} />
  </div>
</BrowserRouter>
    );
  },
);

// Component proptypes.
Routes.propTypes = propTypes;

export default withRouter(Routes);

这是我的帖子，显示了所有标题，当您单击标题时，它会将其传递给 Post 组件以显示在页面顶部。 我想更改它，以便它链接并转到帖子页面并将 id 传递到帖子页面。

import React, { useEffect, useState } from "react";
import ReactDOM from "react-dom";
import Link from '@material-ui/core/Link';
import useReduxApi from '@cparram/use-redux-api';
import Post from "./post";

const Posts = props => {
  const [api, apiCall] = useReduxApi("posts");

  // Call api on component mount
  useEffect(() => {
    apiCall({
      endpoint: "https://jsonplaceholder.typicode.com/posts"
    });
  }, []);

  const [selectedPostId, setPostId] = useState(null);
  const preventDefault = event => event.preventDefault();
  return (
    <div>
      <h1>Posts</h1>
      <h5>Select one item</h5>
      {!api.fetching &&
        api.data &&
        api.data.map(post => (
          <Link to='/post/id' onClick={preventDefault}>
         <div key={post.id} onClick={() => setPostId(post.id)}>
            {`title: ${post.title}`}
          </div>
          </Link>
        ))}
    </div>
  );
};



export default Posts;

这是我的帖子

import React, { useEffect, useState } from "react";
import ReactDOM from "react-dom";

import useReduxApi from '@cparram/use-redux-api';

const Post = props => {
  const { id } = props;
  const [{ fetching, data: post }, apiCall] = useReduxApi(`post-${id}`);

  useEffect(() => {
    apiCall({
      endpoint: `https://jsonplaceholder.typicode.com/posts/${id}`
    });
  }, [id]);

  return (
    <div>
      {fetching && `Loading post with id ${id}...`}
      <p>{!fetching && post && `body: ${post.title}`}</p>
      <p>{!fetching && post && `body: ${post.body}`}</p>
    </div>
  );
};



export default Post;

我在帖子中创建了一个链接以链接到我的帖子页面，但这不起作用。 我不知道我的路由器是不是我的链接有问题

代码和框链接https://codesandbox.io/s/nervous-wave-1io99

Answer 1

尝试这个：

const Post = props => {
  const [{ fetching, data: post }, apiCall] = useReduxApi();

  useEffect(() => {
   if(props.match.params.id){
    apiCall({
      endpoint: `https://jsonplaceholder.typicode.com/posts/${
        props.match.params.id
      }`
    });
   }
  }, [props.match.params.id]);

  return (
    <div>
      {fetching && `Loading post with id ${props.match.params.id}...`}
      <p>{!fetching && post && `body: ${post.title}`}</p>
      <p>{!fetching && post && `body: ${post.body}`}</p>
    </div>
  );
};

import React, { useEffect, useState } from "react";
// import ReactDOM from "react-dom";
import {Link} from 'react-router-dom';

import useReduxApi from '@cparram/use-redux-api';
// import Post from "./post";

const Posts = props => {
  const [api, apiCall] = useReduxApi("posts");

  // Call api on component mount
  useEffect(() => {
    apiCall({
      endpoint: "https://jsonplaceholder.typicode.com/posts"
    });
  }, []);

  // const [selectedPostId, setPostId] = useState(null);

  return (
    <div>
      <h1>Posts</h1>
      <h5>Select one item</h5>
      {/* {selectedPostId && <Post id={selectedPostId} />} */}
      {api.fetching && "Loading posts ..."}
      {!api.fetching &&
        api.data &&
        api.data.map(post => (
          <Link to={`/post/${post.id}`}>
            {`title: ${post.title}`}
          </Link>
        ))}
    </div>
  );
};