javascript - 我正在尝试将路由器添加到我的反应应用程序
问题描述
我有一个反应组件显示标题列表,当您单击页面顶部的标题时,将显示帖子的正文。我有在不同组件中显示帖子正文的组件。
我想创建一个路由器文件,该文件将根据 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;
我在帖子中创建了一个链接以链接到我的帖子页面,但这不起作用。我不知道我的路由器是不是我的链接错误
codesandbox link https://codesandbox.io/s/nervous-wave-1io99
解决方案
try this:
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>
);
};
推荐阅读
- flutter - 如何根据小部件的形状制作一个添加阴影的容器
- php - Typo3 自定义 Content Elements 缓存问题
- jquery - 将 1 天添加到引导日期选择器
- django - 在多个模型中搜索
- r - 计算面板数据 R 中的平均值
- python - 尽管 POST 请求成功,Django 保存方法不起作用
- python - 从作为数据框一部分的列表的一部分中提取数字
- html - 在特定断点处配置 .container 最大宽度 - Tailwindcss
- swift - Swift:每 x 秒返回一次值
- c - 从 macOS 构建 sqlcipher3 时出现致命错误(未找到“sqlcipher/sqlite3.h”文件)