umi 获取路由参数

最新推荐文章于 2024-07-08 10:00:18 发布

tankpanv

最新推荐文章于 2024-07-08 10:00:18 发布

阅读量9.3k

点赞数 3

分类专栏： react 文章标签：前端 javascript vue.js

本文链接：https://blog.csdn.net/tankpanv/article/details/122389060

版权

react 专栏收录该内容

17 篇文章 0 订阅

订阅专栏

在config.js里添加路由

{
             // name: 'applications',
             // icon: 'smile',
              path: '/blog/show',
              component: './blog/ShowSingleArticle',
            },

在路由query的参数存在props.location.query 结构里

const EditArticle: FC<Record<string, any>> = (props) => {
 
  const [content, setContent] = useState("") //
  const params = props.location

 
  const getContent = useCallback(async () =>{
    const articleInfo = await GetContent({ id: params.query.id})
    const contentI = articleInfo.content
    console.log("params", params.query.id)
    setContent(contentI || "")
  },[params.query.id])

  // 及时销毁 editor ，重要！
  useEffect(() => {
    return () => {
      if (editor == null) return
      editor.destroy()
      setEditor(null)
    }
  }, [editor])

  useEffect(() => { 
    
    getContent()
  }, [getContent])

  return (
   
      <PageContainer content="博客">
       
        <Card><div
          dangerouslySetInnerHTML={{
            __html: content
          }} /></Card>

      </PageContainer>
  );
};

export default EditArticle;