Question

我正在使用create-react-app，react-router V4.3.1开发React应用程序。当我执行npm start时，开发服务器可以正常运行，并且在后续代码上进行更改时，页面会自动重新加载，并且我可以遍历不同的路径路径，在其中渲染/ login，/ sign-up等不同的组件。

现在问题出在生产构建中，当我执行npm run build时，构建成功，以后，根据create-react-app文档，我尝试使用{{1}在服务器上运行我的应用}。

路由不起作用，因为根页面“ /”（serve -s build）可以很好地加载，但是在随后单击“登录”和“注册”按钮时，路由到/ login和/注册失败。它给我404（找不到请求的路径）错误。

App.js：

http://localhost:5000

manifest.json：

import React, { Component } from "react";
import "./App.css";
import { BrowserRouter as Router, Switch, Route } from "react-router-dom";

const Onboarding = React.lazy(() =>
  import("./Components/Onboarding/Onboarding")
);
const Login = React.lazy(() => import("./Containers/Login/Login"));
const SignUp = React.lazy(() => import("./Containers/SignUp/SignUp"));
const LoginLegal = React.lazy(() =>
  import("./Components/LoginLegal/LoginLegal")
);

class App extends Component {
  render() {
    return (
      <div className="App">
        <React.Suspense fallback={<div>Page is loading...</div>}>
          <Router>
            <Switch>
              <Route
                exact
                path="/"
                render={props => <Onboarding {...props} />}
              />
              <Route path="/login" render={props => <Login {...props} />} />
              <Route path="/sign-up" render={props => <SignUp {...props} />} />
              <Route
                path="/legal"
                render={props => <LoginLegal {...props} />}
              />
            </Switch>
          </Router>
        </React.Suspense>
      </div>
    );
  }
}
export default App;

_redirects：

{
  "short_name": "React App",
  "name": "Create React App Sample",
  "start_url": "./index.html",
  "display": "standalone",
  "theme_color": "#000000",
  "background_color": "#ffffff"
}

完成#Redirects for netlify to enable SPA routing. #This file is added to enable routes to different paths when website is hosted on netlify. #Make sure that in manifest.json file we should have : "start_url": "./index.html" /* /index.html 200文件中的_redirects和"start_url": "./index.html"以启用netlify路由，该路由工作正常。

在package.json文件中没有指定主页。

应该添加/修改哪些内容，以便与manifest.json正常工作？

感谢您的帮助。

在本地主机上运行生产版本时出现路由问题

0 个答案: