反应网站真的很慢，按钮不起作用

Question

我最近用React创建了一个网站，我是新手，所以它有一些问题。网站非常慢，因此很难导航，正如你所看到的：https://giacomosorbi.github.io/joanaoli09-module-ii/.我已经调整了所有图像的大小，所以不知道该怎么做才能解决这个问题。

我需要帮助的第二个问题是按钮不能按预期重定向到其他页面，你可以在网站上查看。为了创建按钮，我在<Button>:中使用了NavLink

<Button variant="outline-dark" onClick={() => (<NavLink to="/products"></NavLink>)}>See our Products</Button>

我导入了NavLink，所以我不确定出了什么问题。这是整个主页，但这种情况发生在网站的其他页面：

import React from "react"
import "./HomePage.css";
import  homeImage1 from '../../assets/homeImage1.jpg'
import  homeImage2 from '../../assets/homeImage2.jpg'
import homeImage3 from '../../assets/homeImage3.jpg'
import {NavLink} from 'react-router-dom';
import { Button } from 'react-bootstrap';
import aboutImage from '../../assets/aboutImage.jpg'
const Home = () => (
<>
<div class="homepage">
<h3>We help you create healthy recipes in a easy and quick way, for a variety of breakfasts and snacks</h3>

<div className="images">

<img src={homeImage1} alt="breakfast bowl"/>
<img src={homeImage2} alt="breakfast bowl"/>
<img src={homeImage3} alt="breakfast bowl"/>

</div>
<div className="presentation">
We provide easy and beautifully prepared breakfast and snacks for any occasions: a picnic, weekly breakfasts for the kids, a last minute party, or just because you’re feeling like it. 
<p>We deliver at your house or location. In addition, we also have planned meals for the whole week. We provide the recipes and the ingredients necessary.</p>

<Button variant="outline-dark" onClick={() => (<NavLink to="/products"></NavLink>)}>See our Products</Button>
</div>

<div className="about-section">

<div className="about-image">
<img src={aboutImage} alt="about-us"/>
</div>
<div className="about-us">
<h1>Want to know  more about us? </h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<Button variant="outline-dark" className="btn-about" onClick={() => (<NavLink to="/about"></NavLink>)}>Know More</Button>
</div>

</div>

<div className="contact-section">
<h1> GET IN TOUCH </h1>
<p>Send us a message regarding your order or other enquiries you might have</p>
<Button  variant="dark" onClick={() => (<NavLink to="/contact"></NavLink>)}>Contact us!</Button>
</div>
</div>
</>
)
export default Home; 

您可以在此处查看整个代码：https://github.com/GiacomoSorbi/joanaoli09-module-ii/tree/gh-pages

Answer 1

不能在onClick函数中使用NavLink，因为它是一个组件。你可以把你的按钮包在里面：

<NavLink to="/products">
<Button variant="outline-dark">
See our products
</Button>
</NavLink>

Answer 2

第二期：

NavLink是一个组件，您想要的是一个重定向您的函数。

或者，您可以使用Button组件的href道具：

<Button variant="dark" href="/contact">Contact us!</Button>