Javascript 如何在具有多个页面的网站中使用react router dom

我想用react和react路由器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上发生的一样。当有人单击他想观看的任何视频缩略图时，网站不会刷新，而是通过internet加载组件或页面。

您可以使用路由器挂钩useParam（）根据博客ID动态设置帖子

---

请查看官方链接了解更多详细信息

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

使用如下所示的路由，并使用

useParams

hook访问传入路由的id

---

嘿@Bipin，我认为你犯了一个错误，你不应该将每个博客文章定义为一个单独的组件。它必须有一个blog组件，地址为

/blog

，引用您的blog列表，然后您可以定义一个类似

/blog/：slug

的路径来引用每个blog帖子。请查看react router页面中的

useParam

示例：如果您还不清楚，请随意在此处提问。谢谢您的帮助，但请查看代码下方的问题。如何在不刷新页面的情况下从服务器加载组件。不是“首先加载所有组件，然后在需要时呈现它们。”我认为您必须延迟加载所需内容，并在@Mosijava建议的API调用之上获取博客信息。如果你能花一分钟去理解他所说的话，那应该没什么问题。现在，请告诉我如何从node js服务器请求日志数据，以及如何解决该请求：）您可以从

useffect

hook从日志详细信息组件获取日志详细信息。如前所述，博客帖子的id可以从

useParams

hook获取