Question

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

例如：

localhost：3000 /登录

应呈现一个名为login.html的文件

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

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

如果这是一个真正的新手问题，我深表歉意，但是我在网上找不到很多东西。

Answer 1

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

反应路由器-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教程

Answer 2

根据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;

如何将另一条路由添加到使用create-react-app创建的默认React应用程序？

2 个答案: