next.js 如何在Reactjs中使用动态路由

uajslkp6  于 2022-11-18  发布在  React
关注(0)|答案(1)|浏览(192)

我正在与Reactjs和Nextjs和我的工作动态路由,换句话说,我有博客列表,现在我想显示博客的详细信息,我创建了文件夹名“博客”,并把文件名“[slug.js”]在这里面,但无法重定向到该网址,这里是我目前的代码在Allblog.tsx

<Link href={`/blog/${todoList.id}`}>Edit</Link>

这是我在“blog/[slug.js]”中的代码

import Axios from "axios";
    import  {useRouter}  from "next/router";
    import { Editor } from '@tinymce/tinymce-react';
    
    //import LatestBlogs from "../../components/LatestBlogs/LatestBlogs";
    import Link from 'next/link'
    import { useEffect, useState  } from 'react'
    import Sidebar from '../../components/Sidebar'
    
    const slug = ({ posts }) => {
      return(
          <div>
               <h2> Hello World </h2>
          </div>
        );
    
    };
    
    export default slug;
    
    
   export const getStaticProps = async ({ params }) => {
 const { data } = await Axios.get(`https://xxxxxxxxxxxxxx/api/getblogbyuserid/${params.slug}`);
  const post = data;
  return {
    
    props: {
      post,
    },
  };
};

export const getStaticPaths = async () => {
  const { data } = await Axios.get("http://xxxxxxxxxxxxxxxxx/api/blogs");
  const posts = data.slice(0, 10);
  const paths = posts.map((post) => ({ params: { slug: post.id.toString() } }));
  return {
    paths,
    fallback: true,
  };
};

相关问题