时间戳

首页 > 解决方案 > 如何在有很多页面的网站中使用 react-router-dom

javascript - 如何在有很多页面的网站中使用 react-router-dom

问题描述

我想用 react 和 react-router-dom 制作一个博客网站。一个博客网站由 100 多个页面组成。我的问题是，如果我路由所有的博客页面，我的网站会因为必须一次加载所有组件而变得错误和缓慢吗？就像下面的代码 -

<Route exact path='/blog1' component={Blog1}></Route>
<Route exact path='/blog2' component={Blog2}></Route>
<Route exact path='/blog3' component={Blog3}></Route>
<Route exact path='/blog4' component={Blog4}></Route>
<Route exact path='/blog5' component={Blog5}></Route>
<Route exact path='/blog6' component={Blog6}></Route>
<Route exact path='/blog7' component={Blog7}></Route>
<Route exact path='/blog8' component={Blog8}></Route>
<Route exact path='/blog9' component={Blog9}></Route>
<Route exact path='/blog10' component={Blog10}></Route>
<Route exact path='/blog11' component={Blog11}></Route>
<Route exact path='/blog12' component={Blog12}></Route>
<Route exact path='/blog13' component={Blog13}></Route>

有人可以告诉我我该怎么做：-当用户单击我网站上的任何链接时，网站不会刷新，而是当时从服务器请求一个组件，然后该组件就像发生的事情一样呈现在 Youtube.com 上。当有人点击他想观看的任何视频缩略图时，网站不会刷新，而是通过互联网加载组件或页面。

标签： javascriptreactjsreact-routerreact-router-dom

解决方案

您可以为博客详细信息创建单个组件，并根据传递给该路由的参数使用数据，而不是为每个博客文章使用单独的组件。

使用像下面这样的路由并使用useParams钩子传递给路由的访问 id。

<Route path="/blog/:id" component={BlogDetailComponent} />

推荐阅读