如何向使用 create-react-app 制作的默认反应应用程序添加另一条路线？答案

【问题标题】：How to add another route to the default react application made with create-react-app?如何向使用 create-react-app 制作的默认反应应用程序添加另一条路线？
【发布时间】：2019-04-02 21:55:25
【问题描述】：

我正在设置一个 React Web 应用程序，并使用默认的 create-react-app 来生成项目。但是我不确定如何将其他路由添加到默认服务器

例如：

localhost:3000/登录

应该渲染一个名为 login.html 的文件

我什至不确定在哪里可以找到服务器文件。我可以运行 npm build 然后使用我自己的服务器来执行静态文件，但我想知道是否有办法在默认项目中实现这一点，因为它允许您查看实时更改等。

我的 Login.html 位于 public 文件夹中，而 login.js 和 login.css 位于 src 文件夹中。

如果这是一个非常新手的问题，我深表歉意，但我无法在网上找到很多内容。

【问题讨论】：

标签： reactjs react-router

【解决方案1】：

根据 Create React App 的documentation。

Create React App 并没有规定具体的路由解决方案，但是 React Router 是最流行的一种。要添加它，请运行：

npm install --save react-router-dom

要试一试，请删除所有 src/App.js 中的代码并将其替换为其上的任何示例网站。 Basic Example 是一个很好的起点。

注意你may need to configure your production server to support client-side routing before deploying your app。

我建议您阅读React Router 上的快速入门指南。对于您描述的问题，这意味着您可能有一个看起来像这样的src/App.js 文件：

import React, { Component } from "react";
import { BrowserRouter as Router, Route, Link } from "react-router-dom";
import Login from "./Login";
import Home from "./Home";

class App extends Component {
  render() {
    return (
      <Router>
        <div className="App">
          <ul>
            <li>
              <Link to="/">Home</Link>
            </li>
            <li>
              <Link to="/login">Login</Link>
            </li>
          </ul>

          <hr />

          <Route exact path="/" component={Home} />
          <Route path="/login" component={Login} />
        </div>
      </Router>
    );
  }
}

export default App;

【讨论】：

【解决方案2】：

Create-React-App 是一个单页应用程序，因此您没有多个 HTML 文件，只有最初出现的 index.html。你的问题可能有多个不同的答案，所以我只告诉你我个人知道的最流行的方法。

React-Router-Dom

这就是很多人在他们的网站上浏览不同视图的方式。为了给出它如何工作的基本概念，您创建一个包含不同“路由”的路由器，这些路由都指向项目中的不同类，可以是它自己的“视图”，基本上是一个不同的页面。

<HashRouter>
  <Switch>
    <Route path="/" name="Home" component={Full}/>
  </Switch>
</HashRouter>

所以这里的“Full”是一个组件的名称，它只是一个 javascript 类，很像使用 Create-React-App 应该已经拥有的“App.js”。

Download here

如果您使用 react，您想要做的是制作不同的 Javascript 类，就像“App.js”一样，然后从您从网站加载的任何初始页面重定向到它们。 React-Router 上有很多 youtube 教程

【讨论】：