如何在另一个 index.js 文件上导出 react-slick？

Question

I want to add react-slick code on to my index.js (services folder) by following it's documentation, but it's not working.

I'm using this method to show/call my pages on my main index.js

index.js (Services Folder) , i want to add react slick code on this file

const Services = () => {
    return (
        <ServicesContainer id="ourproducts">
        <ServicesH1>Our Products</ServicesH1>

    )
}
export default Services

index.js, this file is calling all index.js off my other pages

import React, { useState } from 'react'
import Footer from '../components/Footer'
import HeroSection from '../components/HeroSection'
import InfoSection from '../components/InfoSection'
import { homeObjOne, homeObjTwo, homeObjThree } from '../components/InfoSection/Data'
import Navbar from '../components/Navbar'
import Services from '../components/Services'
import Sidebar from '../components/Sidebar'
const Home = () => {
    const [isOpen, setIsOpen] = useState(false);
    const toggle = () => {
        setIsOpen(!isOpen);
    };
    return (
        <>
            <Sidebar isOpen={isOpen} toggle={toggle} />
            <Navbar toggle={toggle}/>
            <HeroSection />
            <Services />
            <InfoSection {...homeObjOne}/>
            <InfoSection {...homeObjTwo}/>
            <InfoSection {...homeObjThree}/>
            <Footer />
        </>
    );
};
export default Home;

I tried this on index.js (Services Folder), but not working The error said "Only one default export allowed per module"

import React, { Component } from "react";
import Slider from "react-slick";

import "~slick-carousel/slick/slick.css"; 
import "~slick-carousel/slick/slick-theme.css";

export default, Services class MultipleItems extends Component {
    render() {
      const settings = {
        dots: true,
        infinite: true,
        speed: 500,
        slidesToShow: 3,
        slidesToScroll: 3
      };
      return (
        <div>
          <h2> Multiple items </h2>
          <Slider {...settings}>
            <div>
              <h3>1</h3>
            </div>
            <div>
              <h3>2</h3>
            </div>
            <div>
              <h3>3</h3>
            </div>
            <div>
              <h3>4</h3>
            </div>
            <div>
              <h3>5</h3>
            </div>
            <div>
              <h3>6</h3>
            </div>
            <div>
              <h3>7</h3>
            </div>
            <div>
              <h3>8</h3>
            </div>
            <div>
              <h3>9</h3>
            </div>
          </Slider>
        </div>
      );
    }
}

Answer 1

You're exporting two defaults in index.js file

Just remove the last line export default services