问题描述
在这里,我通过服务器端的api获取新闻,然后为该特定新闻项创建路由。当用户单击新闻项之一时,将创建路线,并且用户将重定向到创建的路线,但是在浏览器中前进和后退时存在导航问题。
我知道我应该创建一个文件来获取route的参数,并再次调用该特定新闻的api,但是我不知道该如何帮助我。
这是News.js中嵌套路由的代码:
return (
<Router>
<Switch>
<Route
path={match.path}
exact
>
<NewsList />
</Route>
<Route
path={`${match.path}/:topicId`}
>
<NewsFullContent />
</Route>
</Switch>
</Router>
);
,这是NewsFullContent
(呈现新闻的文件)的代码:
import React,{ useEffect } from 'react';
import styled from 'styled-components';
import BackButton from '../../../components/BackButton';
import { withRouter,useParams } from 'react-router-dom';
import apis from '../../../app/apis';
import cts from '../../../app/cts';
const NewsTitle = styled.h1`
font-size: 14pt;
`;
const NewsDate = styled.h3`
font-size: 10pt;
color: #aaa;
`;
const NewsContent = styled.div`
`;
const NewsType = styled.h4`
font-size: 8pt;
color: #ddd;
`;
const NewsFullContent = ({ location }) => {
const {
title,content,type,date
} = location.state;
return (
<div>
<BackButton />
<NewsTitle>{title}</NewsTitle>
<NewsDate>{date}</NewsDate>
<NewsContent
dangerouslySetInnerHTML={{ __html: content }}
>
</NewsContent>
<NewsType>type: {type}</NewsType>
</div>
);
};
export default withRouter(NewsFullContent);
解决方法
在@mqtt.on_connect()
def handle_connect(client,userdata,flags,rc):
mqtt.subscribe('home/mytopic')
组件中,您可以使用BackButton
useHistory