如何在React中提供不同页面的服务？

Question

假设我有一个React项目，还有一个Express服务器为我的项目服务，如下所示（构建项目后）：

]

这样，仅提供index.html，不是吗？如果用户转到另一个页面，该页面如何发送给他？

Answer 1

使用HTML5 push state管理javascript中的路由。因此，每次您单击链接并转到另一条路线时，都会使用浏览器历史记录和推送状态。这是几乎所有单页应用程序中路由的基础。

直到，除非刷新页面，否则您的请求不会发送到服务器。因此，index.html仅提供一次服务，之后路由器（这里是react-router）将接管并使用浏览器的历史记录API管理url中的路由。

希望这会有所帮助！

Answer 2

那是使用react-router完成的，后者使用浏览器的History API管理路由。

这种网站样式称为单页应用程序，而不是多页应用程序，在多页应用程序中，服务器根据您路由到的URL发送不同的页面。

Answer 3

您可以像这样使用react-router-dom

<Switch>
<Route exact path="/" component={Home}/>
<Route path="/someurl" component={ComponentForSomeUrl}
</Switch>

并使用BrowserRouter渲染它

但是您可以使用诸如history.push之类的东西，我认为react-router-dom确实比React-router简单而且更好

在大多数情况下，使用React Express构建API时，您无需将html文件发送到特定路径

Answer 4

要在您的React文件夹中执行npm install --save react-router-dom。

因此，在React Router库系列中，可以安装几个不同的依赖项。

确保您永远不会自行安装React Router。

发布在npm上的react-router库是React Router常规项目中所有内容的核心库。

因此react-router内含一些核心导航逻辑。它决定了如何使用React，如何根据不同的规则和其他一些低级逻辑来更改内容。

要获得一些特定于浏览器的实际实现，请安装react-router-dom。

因此，只要您想在项目上使用React Router来处理导航，请始终安装react-router-dom，而不要安装react-router。

您可能还认为还需要其他类似名称的项目react-router-native以便在React Native项目中使用。

在Web应用程序中，我们使用react-router-dom，而不是在开发本机移动应用程序。

React-router-native仅适用于本机移动应用程序。

对于浏览器，您总是想要react-router-dom而不是react-router-native

因此，也许在您的App.js组件中，您需要进行如下设置：

import React from "react";
import { BrowserRouter, Route } from “react-router-dom”;

const App = () => {
  return <div>App</div>;
};

export default App;

我还建议您是不熟悉React Router的人，可以通过设置以下临时内容来熟悉它：

import React from "react";
import { BrowserRouter, Route } from “react-router-dom”;

const PageOne = () => {
    return <div>PageOne</div>;
};

const PageTwo = () => {
    return <div>PageTwo<button>Click Me</button></div>;
};

const App = () => {
  return (
    <div>
      <BrowserRouter>
        <div>
          <Route path=“/” exact component={PageOne} />
           <Route path=“/pagetwo”  component={PageTwo} />
        </div>
           </BrowserRouter>
    </div>
   );
};

先访问localhost:3000，然后再访问localhost:3000/pagetwo，查看所有工作原理。

当我们访问一个名为localhost：3000的页面并在URL中键入该地址时，它将加载应用程序。

React Router本身并不关心整个URL，相反，React Router仅关心域名或端口定义之后列出的所有字符。

Localhost：3000被解释为localhost:3000/

如果我转到localhost:3000/，它仍会加载我的应用程序。

现在，如果我去localhost:3000/pageone，这里还有其他示例，React Router只关心端口和域之后的所有内容

同一件事，如果我去airbnb.com/listings/spain，反应路由器在决定向屏幕呈现什么内容时只会考虑/listings/spain。

在上面的示例中，请注意，我创建了BrowserRouter的实例，而BrowserRouter创建了自己的对象，称为历史对象。

此历史记录对象将查看地址栏中的URL，并仅提取响应路由器关心的URL部分。

然后，历史记录对象将把该路径传递给BrowserRouter，后者将该路径传递给Route组件，而这些Route组件则根据是否显示自己来隐藏或隐藏自己用户正在访问的路径以及创建该路径时传递的路径属性。