reactjs - 点击更多链接，显示404错误

Question

我在 中部署了一个 React hooks 博客站点netlify，它在网站上显示博客内容。但是当我点击<a href={slug}>...more {'>'}{'>'}</a>它显示404的链接时，找不到页面错误？这在我当地运行良好，任何建议都会非常有帮助。

export default function Home() {

    const [searchTerm, setSearchTerm] = useState("");
    const [searchResults, setSearchResults] = useState([]);
    const [loadItems, setLoadItems] = useState(3);
    const currentDate = Moment().format("MMM DD YYYY");
    const dateTo = Moment().subtract(14, 'days').format('MMM DD YYYY');
   
    
     const results = React.useMemo(
        () =>
      searchResults.filter(blog => {
                return blog.fields.title.toLowerCase().includes(searchTerm) || blog.fields.title.toUpperCase().includes(searchTerm) || blog.fields.shortDescription.toLowerCase().includes(searchTerm)
                    || blog.fields.shortDescription.toUpperCase().includes(searchTerm)
            }),
        [searchTerm, searchResults]
    );
    
        const randomizedHex = (tags) => {
        setFindTag(tags);
        console.log("Print tag of a:" + tags);
        const randomColor = "#" + Math.floor(Math.random() * 16777215).toString(16);
        setShowColor(randomColor);
    }


    useEffect(() => {
        setTimeout(() => {
            const fetchData = async () => {
                try {
               // as netlify doesn't support rendering site via express server, so giving the url directly // http://localhost:5000/service/blogpost
                    const res = await axios.get('https://cdn.contentful.com/spaces/spac_id_here/entries?access_token=token_here&limit=1000&skip=0');
                    setSearchResults(res.data.items);
                    console.log(res.data.items);
                    setIsLoading(false);
                } catch (e) {
                    console.log(e);
                }
            }
            fetchData();
        }, 1000)
    }, []);

<div className="column right" >
        {!results.length && (<div> <div className="noSearchData"><Wave text="No results available...!" /></div> </div>)}
            <div className="container">
                       {
                             results.slice(0, loadItems).map(({ sys: { id, createdAt, updatedAt }, fields: { title, image, shortDescription, description, tags, skillLevel, duration, slug } }) => (
                                        <div key={id} id="blogpostEach" className="column-center">
                                                {
                                                    Moment(createdAt).format('MMM DD YYYY') === currentDate || Moment(updatedAt).format('MMM DD YYYY') === currentDate || Moment(createdAt).format('MMM DD YYYY') <= currentDate && Moment(createdAt).format('MMM DD YYYY') >= dateTo ? (
                                                        <span className="newStatus">new</span>
                                                    ) : (
                                                            <span></span>
                                                        )
                                                }
                                                <article onClick={() => randomizedHex(tags)} key={id} className="blogmaintile">
                                                    <div className="blogback">
                                                        {/*<img className="blogImage" key={image.fields.image} src={image.fields.image} alt="myImage"></img>*/}
                                                    </div>
                                                    <div className="blogtitle">
                                                        <span key={title}>{title}</span>
                                                    </div>
                                                    <section>
                                                        <p className="blogdescription" key={shortDescription}>{shortDescription}</p>
                                                        <span className="blogcreateddate" key={createdAt}>{Moment(createdAt).format('MMM DD YYYY')}</span>
                                                        <span style={{ display: "none" }} key={tags}>{tags}</span>
                                                    </section>
                                                    <section>
                                                        <p className="bloglongdescription" key={description}>{description}</p>
                                                    </section>
                                                    <section className="col1">
                                                        {
                                                            <span className="difftags" key={skillLevel} >{skillLevel}</span>
                                                        }
                                                    </section>
                                                    <span className="blogduration" key={duration} >{duration} min</span>
                                                    <section className="col2">
                                                        <a href={slug}>...more {'>'}{'>'}</a>
                                                    </section>
                                                </article>
                                    </div>

                           ))
                    }
           </div>
     </div>                     
}

标签： reactjsreact-hooksnetlify