具有React的OnePage网站，是否使用通过hashlink的平滑滚动？

如何解决具有React的OnePage网站，是否使用通过hashlink的平滑滚动？

我是编码的初学者，并尝试使用react将网页创建为单页应用程序。目前，我有一个带有导航栏（主页，项目，团队，联系人）的网页，您可以在其中单击某个项目，而只能访问该页面（例如，进入项目页面）。但是，我希望它们在一页上，因此您可以逐节滚动浏览该页面。另外，当我点击导航栏中的某个项目（例如项目）时，它应该滚动到该部分。我以为也许可以使用哈希链接来实现这一目标？我尝试安装并实施它，但可能做错了。

这是我当前的代码。

我的AppRouter.js：

library(ggplot2)

#Data
df2 <- structure(list(FECHA_RESULTADO = structure(c(18327,18328,18329,18330,18331,18332,18333,18334,18335,18336,18337,18338,18339,18340,18341,18342,18343,18344,18345,18346,18347,18348,18349,18350,18351,18352,18353,18354,18355,18356,18357,18358,18359,18360,18361,18362,18363,18364,18365,18366,18367,18368,18369,18370,18371,18372,18373,18374,18375,18376,18377,18378,18379,18380,18381,18382,18383,18384,18385,18386,18387,18388,18389,18390,18391,18392,18393,18394,18395,18396,18397,18398,18399,18400,18401,18402,18403,18404,18405,18406,18407,18408,18409,18410,18411,18412,18413,18414,18415,18416,18417,18418,18419,18420,18421,18422,18423,18424,18425,18426,18427,18428,18429,18430,18431,18432,18433,18434,18435,18436,18437,18438,18439,18440,18441,18442,18443,18444,18445,18446,18447,18448,18449,18450,18451,18452,18453,18454,18455,18456,18457,18458,18459,18460,18461,18462,18463,18464,18465,18466,18467,18468,18469,18470,18471,18472,18473,18474,18475,18476,18477,18478,18479,18480,18481,18482,18483,18484,18485,18486,18487,18488),class = "Date"),casos_x_dia = c(1,5,2,3,1,8,10,19,28,20,27,56,62,30,39,33,64,100,52,34,136,142,130,250,117,222,292,833,444,647,1042,1083,817,1038,1404,738,1284,1041,1383,1329,1109,1407,1076,2039,2171,2104,2056,2239,2397,1422,3399,3367,4238,3372,2625,3369,1922,3990,3969,3634,3612,3297,2469,936,3601,4348,4441,3739,4304,4125,1785,5130,5198,5290,5514,6100,5399,1792,6968,6919,7371,6425,5745,4613,2262,4242,3774,2614,4029,4944,4764,2637,4743,5310,5726,5069,4661,4500,2441,4363,3376,3915,3436,3447,3526,1446,4335,3768,4109,4154,4331,1598,2729,3748,3648,3349,3862,3518,2299,3783,4035,2598,2495,4913,4246,2380,3114,4194,4432,4535,5141,5066,2228,3756,4815,5972,5474,5960,5626,2950,7071,3017,6721,7248,7601,6697,3194,7818,7754,7508,8442,7407,6759,3491,7679,8473,8560,7590,4805),media_movil = c(NA,NA,4,5.28571428571429,7.28571428571429,11,13.4285714285714,17.1428571428571,24,31.7142857142857,38.2857142857143,39.8571428571429,41.4285714285714,43.2857142857143,48.5714285714286,54.8571428571429,53.4285714285714,50.2857142857143,65.4285714285714,80.1428571428571,94,120.571428571429,123,147.285714285714,184.142857142857,283.714285714286,326.857142857143,400.714285714286,513.857142857143,651.857142857143,736.857142857143,843.428571428571,925,967,1058,1057.85714285714,1100.71428571429,1173.85714285714,1184,1184.42857142857,1232.71428571429,1340.57142857143,1502,1605,1708.85714285714,1870.28571428571,2011.71428571429,2061.14285714286,2255.42857142857,2426.28571428571,2731.14285714286,2919.14285714286,2974.28571428571,3113.14285714286,3184.57142857143,3269,3355,3268.71428571429,3303,3270.42857142857,3129.57142857143,3074,3128.14285714286,3243.42857142857,3261.57142857143,3405.42857142857,3642,3763.28571428571,3981.71428571429,4103.14285714286,4224.42857142857,4478,4734.57142857143,4916.57142857143,4917.57142857143,5180.14285714286,5426,5723.28571428571,5853.42857142857,5802.71428571429,5690.42857142857,5757.57142857143,5368.14285714286,4918.85714285714,4239.28571428571,3897,3782.57142857143,3804.14285714286,3857.71428571429,3929.28571428571,4148.71428571429,4593.28571428571,4741.85714285714,4701.42857142857,4663.71428571429,4635.71428571429,4581.42857142857,4305.14285714286,4046.42857142857,3813.14285714286,3639.71428571429,3500.57142857143,3358.42857142857,3354.42857142857,3410.42857142857,3438.14285714286,3540.71428571429,3667,3688.71428571429,3459.28571428571,3456.42857142857,3390.57142857143,3275.57142857143,3208.57142857143,3207.42857142857,3307.57142857143,3458.14285714286,3499.14285714286,3349.14285714286,3227.14285714286,3377.28571428571,3481.28571428571,3492.85714285714,3397.28571428571,3420,3682,3973.42857142857,4006,4123.14285714286,4101.42857142857,4193.14285714286,4281.85714285714,4501.85714285714,4636,4753,4833,4936.14285714286,5409.71428571429,5152.85714285714,5259.85714285714,5513.28571428571,5747.71428571429,5900.71428571429,5935.57142857143,6042.28571428571,6719,6831.42857142857,7002,6974.28571428571,6983.14285714286,7025.57142857143,7005.71428571429,7108.42857142857,7258.71428571429,7137,6765.28571428571)),row.names = c(NA,-162L),class = "data.frame")

我的导航栏：

prueba_legend <- ggplot(df2) + 
  geom_line(aes (x = FECHA_RESULTADO,y = media_movil,color = "media_movil"),size = 1.5,show.legend = F) +
  geom_line(aes (x = FECHA_RESULTADO,y = casos_x_dia,color = "casos_x_dia"),linetype = "dashed",show.legend = F ) +
  geom_point (aes(x = FECHA_RESULTADO,color = "casos_x_dia")) +
  scale_colour_manual("",values = c("media_movil"="#CF3721","casos_x_dia"="#31A9B8","casos_x_dia"="#31A9B8")) +
  theme_bw () + theme(legend.position="bottom")

prueba_legend 

import React from 'react';
import { BrowserRouter,Route,Switch,Link,NavLink,} from 'react-router-dom';
import NotFoundPage from '../components/NotFoundPage';
import Navbar from '../components/NavBar';
import HomePage from '../components/HomePage';
import ContactPage from '../components/ContactPage'
import PortfolioItemPage from '../components/PortfolioItemPage';
import TeamPage from '../components/TeamPage';
import ProjectPage from '../components/Project';

const AppRouter = () => (
    <BrowserRouter>
    <div>
        <Navbar />
            <Switch>
                <Route path="/" component={HomePage} exact={true} />
                <Route path="/projekt" component={ProjectPage} />
                <Route path="/team" component={TeamPage} exact={true} />
                <Route path="/team/:id" component={PortfolioItemPage} />
                <Route path="/kontakt" component={ContactPage}/>
                <Route component={NotFoundPage} />
            </Switch>
    </div>
</BrowserRouter>
)

export default AppRouter; 

其他部分（项目，团队，联系人）的代码基本上被构造为家庭部分的代码。

在此先感谢您的帮助！