ReactJS-为不同的URL（路由路径）提供不同的内容，因此它看起来像一个多页应用程序

我来自Java背景，不熟悉ReactJS。很抱歉，如果这是一个愚蠢的问题，但我已经被困在这个问题上好几天了。如果可以的话，请帮忙

我的理解是react适用于单页应用程序。在过去的几周里，我做了一些测试开发，一直在玩路由器等。但是我不知道如何使用react在不同的URL上创建不同的内容。这就是我试图模仿的：

带有登录框的空白页

-顶部带有菜单栏的仪表板

-包含其他信息但与“主页”菜单栏相同的页面

我不想让任何人回复关于如何创建组件/布局的细节（我非常熟悉CSS、HTML等），我不明白的是如何针对不同URL（路由路径）创建具有完全不同内容的“单页应用程序”

如果这是java，我会模板的HTML和不同的网页将提供不同的网址。但这是服务器端的

我已尝试将组件分配到不同的路由：

并在该组件中构建内容，但这不起作用（我认为我被困在Java领域，仍在考虑“服务”内容）

当我看到Facebook（React的提供商）时，似乎所有的菜单操作都在同一个页面的顶部打开，但我不知道不同的组件是如何隐藏的？？和出现？？根据不同的路线点击

也许我完全弄错了，不同的路线使用了独特的HTML页面

请让我知道什么是最佳实践，以及我是如何做到这一点的

如果你能给我指一下youtube视频或一些简单的穿行，我将非常感激

我在网上搜索过“不同路线上的不同反应组件”，但没有找到任何东西真正说明这是如何工作的以及最佳实践是什么

请帮忙

TLDR： 你没有弄错。相同的HTML文件用于为不同的路由“提供”（或“呈现”）不同的内容。您可能需要仔细检查组件和路由器代码，但想法是正确的

---

我冗长乏味的回答 一些历史和背景： 正如您所提到的，几年前，创建网站的常用方法是使用一些后端代码设置服务器，这些代码不仅处理应显示的HTML页面，还处理将显示的数据。大多数操作将在后端完成，前端只关心以令人愉快的方式显示数据

随着Javascript的发展和普及，更多的操作开始在前端完成。随着浏览器变得越来越强大，越来越多的事情可以用Javascript来完成。排序表、过滤数据和AJAX请求就是一些例子

人们开始修改DOM（这意味着他们使用Javascript，而不是后端语言，来更改应该显示哪些数据以及如何显示这些数据）

单页申请（IMHO）： 单页应用程序（SPA）的核心思想是改进这个过程。以ReactJS为例。它的概念（用我自己的话说）是：

“我如何使用较少的处理能力快速更改显示的数据，并为用户创造更好的体验？”

答案（用我自己的话说）是：

“我们只更新屏幕上需要更新的元素。其他所有内容都将保持不变，因此不需要重新渲染。”

对我来说，这意味着许多应用程序现在可以使用ReactJS（或Vue、Angular等）来实现更强大和更友好的用户体验。但是也意味着并非每个应用程序都应该作为SPA构建。对我来说，在“传统”应用程序中仍然有很多有效的用途，后端仍然对数据有很多控制

最后，你回答： 也就是说，我想说，首先要考虑的是，如果你真的需要做水疗；）

如果您这样做，我将看到两种控制应显示哪些数据的方法：

首先，使用“纯”条件渲染：

这意味着Javascript中有一个很大的

if

。为了简单起见，下面是一个示例：

var openMenu = "Home"

if (openMenu == "Home") {
   showHomePage()
} else if (openMenu == "About") {
   showAboutPage()
}

function showHomePage() {
   return <HomeComponent />
}

var openMenu=“主页”
如果（openMenu==“主页”）{
showHomePage（）
}else if（openMenu==“关于”）{
展示页（）
}
函数showHomePage（）{
返回
}

第二，带有路由器控制

---

通过使用

react-router

或类似的东西，您实际上是在将Javascript

if

语句“移动”到URL，而不是一个局部变量，我为react-router示例代码创建了一个沙箱，代码非常少。我希望这将有助于理解和你可以玩。如您所见，我已将导航栏移到页面级组件之外

下面是一个工作示例

从该示例中添加一些代码

从“React”导入React；
从“react dom”导入{render}；
从“react router dom”导入{BrowserRouter，Switch，Route，Redirect}；
从“/Home”导入主页；
从“/About”导入关于；
从“/Contacts”导入联系人；
从“/NavBar”导入导航栏；
Home（）{
回家；
}
函数About（）{
返回大约；
}
功能联系人（）{
返回联系人；
}
常量导航栏=（）=>{
返回(


家


关于


联络


);
};
常量应用=（）=>(
);
render（，document.getElementById（“根”））您可以在app.js或任何文件中编写路由逻辑，具体取决于您的项目。
在index.js中

 import React from "react"
    import ReactDOM from "react-dom"
    import {BrowserRouter} from "react-router"
    import App from "./App"

    ReactDom.render(<BrowserRouter><App/></BrowserRouter>,document.getElementById("root"))

从“React”导入React
从“react”导入ReactDOM-