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

Question

我有 Java 背景，对 ReactJS 很陌生。很抱歉，如果这是一个愚蠢的问题，但我已经被这个问题困扰了几天。如果可以的话请帮忙。

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

1. http://localhost:3000-带有登录框的空白页面
2. http://localhost:3000/home - 顶部有菜单栏的仪表板
3. http://localhost:3000/about - 包含其他信息的页面，但菜单栏与“home”相同

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

如果这是 java，我将对 HTML 进行模板化，并为不同的 URL 提供不同的页面。但这是服务器端的。

我尝试将一个组件分配给不同的路由：<Route path="/home" exact component = {Home} /> 并在该组件中构建内容，但这不起作用（我认为我陷入了 Java 领域，并且仍在考虑“提供”内容）。

当我查看 Facebook（React 提供商）时，似乎顶部的所有菜单操作都在同一页面中打开，但我无法弄清楚如何隐藏不同的组件？并出现？基于点击的不同路线。

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

请让我知道什么是最佳实践以及我如何实现这一目标。

如果您能给我指点 youtube 视频或一些简化的演练，我将非常非常感激。

我在网上搜索了诸如“不同路线上的不同反应组件”之类的内容，但没有找到任何真正显示其工作原理以及最佳实践的内容。

Answer 1

总而言之：

你没有听错。相同的 HTML 文件用于为不同的路由“提供”（或“呈现”）不同的内容。您可能需要仔细检查您的组件和路由器代码，但这个想法<Route path="/home" exact component={Home} />是正确的。

我的回答又长又无聊

一些历史和背景：

正如您所提到的，几年前，创建网站的常见方法是设置一个带有一些后端代码的服务器，这些后端代码不仅可以处理应该显示哪个 HTML 页面，还可以处理要显示的数据。大部分操作将在后端完成，前端只关心以令人愉悦的方式显示数据。

随着Javascript的进步和流行，更多的操作开始在前端完成。随着浏览器变得越来越强大，JavaScript 可以完成越来越多的事情。排序表、过滤数据和 AJAX 请求都是一些示例。

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

单页应用程序（恕我直言）：

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

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

答案（也是我自己的话）是：

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

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

最后，你回答：

也就是说，我想说，首先要反思的是，您是否真的需要 SPA ；）

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

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

if这意味着你的 Javascript很大。为了简单起见，这里有一个例子：

var openMenu = "Home"

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

function showHomePage() {
   return <HomeComponent />
}

二、用路由器控制

通过使用 areact-router或类似的东西，您实际上是将 Javascriptif语句“移动”到 URL，而不是局部变量

有些人会不同意这一点。使用 URL 呈现特定内容，可能不再被归类为单页应用程序，因为最初的想法是通过 Javascript 而不是 URL 来控制屏幕上显示的内容。

有些人会同意，说不同的 URL 将有助于 SEO、组织并允许用户添加书签或共享链接。

最后，您只需要考虑页面布局（或结构）并用 HTML 编写即可。然后，if对应该更改的部分进行声明。要么像这样：

var openMenu = "Home"

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

function showHomePage() {
   return <HomeComponent />
}

或者

<App>
    <Menu />
        {(openMenu == "Home") && <Home />}
        {(openMenu == "About") && <About />}
    <Footer />
</App>

希望能为您提供更多指导

Answer 2

我用非常少的代码为 React Router 示例代码创建了一个沙箱。我希望这将有助于理解并且您可以尝试一下。如您所见，我已将导航栏移至页面级组件之外

这是工作示例https://codesandbox.io/s/react-router-dom-example-8vcqu?from-embed

添加该示例中的一些代码

import React from "react";
import { render } from "react-dom";
import { BrowserRouter, Switch, Route, Redirect } from "react-router-dom";
import Home from "./Home";
import About from "./About";
import Contacts from "./Contacts";
import NavBar from "./Navbar";

Home() {
  return <h1>Home</h1>;
}

function About() {
  return <h1>About</h1>;
}

function Contacts() {
  return <h1>Contacts</h1>;
}

const NavBar = () => {
  return (
    <div className="navbar">
      <ul>
        <li>
          <Link to="/">Home</Link>
        </li>
        <li>
          <Link to="/about">About</Link>
        </li>
        <li>
          <Link to="/contacts">Contacts</Link>
        </li>
      </ul>
    </div>
  );
};


const App = () => (
  <BrowserRouter>
    <NavBar />
    <Switch>
      <Route path="/" component={Home} exact />
      <Route path="/about" component={About} exact />
      <Route path="/contacts" component={Contacts} exact />
      <Redirect to="/" />
    </Switch>
  </BrowserRouter>
);

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