reactjs - 反应构建只能显示开始页面，但不能显示项目中的其他页面

问题描述

我最近开始使用 react 并在其中构建了一个应用程序。

遇到问题，我的项目中有多个页面，并且在localhost中运行良好。但是，当我为我的项目创建一个构建时。我只能看到应用程序中的第一页，而无法看到项目中的其他页面。

例如：

http://website.com/登录。我可以访问这个页面，因为这是项目的开始页面。

现在，当我切换到另一个页面时。http://website.com/主页。我看不到其他页面。它只是说找不到该页面。

下面的代码是路由器文件

import React from 'react';
import {Route, Switch} from 'react-router-dom';
import Layout from '../Layout/index';
import Wrapper from '../App/Wrapper'

import Home from '../HomeDashboard/index'
import History from '../HistoryPage/index'
import Weather from '../Weather/index'

const wrappedRoutes = () => (
    <div>
        <Layout/>
        <div className="container__wrap">
            <Route exact path="/home" component={Home}/>
            <Route exact path="/history" component={History}/>
            <Route exact path="/weather" component={Weather}/>
        </div>
    </div>
);

const Router = () => (
    <Wrapper>
        <main>
            <Switch>
                <Route exact path="/" component={Login}/>
                <Route exact path="/login" component={Login}/>
                <Route path="/" component={wrappedRoutes}/>
            </Switch>
        </main>
    </Wrapper>
);

export default Router;

在package.json中，我还创建了主页。

    "homepage": "http://my-website.com",

下面是构建的index.html文件。

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8"/>
    <link href="favicon.ico" rel="shortcut icon"/>
    <meta content="width=device-width,initial-scale=1" name="viewport"/>
    <meta content="#000000" name="theme-color"/>
    <link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900"
          rel="stylesheet">
    <link href="https://cdn.linearicons.com/free/1.0.0/icon-font.min.css" rel="stylesheet">
    <link href="./static/css/main.d2ba04f3.chunk.css" rel="stylesheet">
    <link href="manifest.json" rel="manifest"/>
    <title>Enimo</title>
    <link href="./static/css/2.22a7d4ef.chunk.css" rel="stylesheet">
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
<script>!function (l) {
    function e(e) {
        for (var r, n, t = e[0], o = e[1], u = e[2], i = 0, f = []; i < t.length; i++) n = t[i], p[n] && f.push(p[n][0]), p[n] = 0;
        for (r in o) Object.prototype.hasOwnProperty.call(o, r) && (l[r] = o[r]);
        for (s && s(e); f.length;) f.shift()();
        return c.push.apply(c, u || []), a()
    }

    function a() {
        for (var e, r = 0; r < c.length; r++) {
            for (var n = c[r], t = !0, o = 1; o < n.length; o++) {
                var u = n[o];
                0 !== p[u] && (t = !1)
            }
            t && (c.splice(r--, 1), e = i(i.s = n[0]))
        }
        return e
    }

    var n = {}, p = {1: 0}, c = [];

    function i(e) {
        if (n[e]) return n[e].exports;
        var r = n[e] = {i: e, l: !1, exports: {}};
        return l[e].call(r.exports, r, r.exports, i), r.l = !0, r.exports
    }

    i.m = l, i.c = n, i.d = function (e, r, n) {
        i.o(e, r) || Object.defineProperty(e, r, {enumerable: !0, get: n})
    }, i.r = function (e) {
        "undefined" != typeof Symbol && Symbol.toStringTag && Object.defineProperty(e, Symbol.toStringTag, {value: "Module"}), Object.defineProperty(e, "__esModule", {value: !0})
    }, i.t = function (r, e) {
        if (1 & e && (r = i(r)), 8 & e) return r;
        if (4 & e && "object" == typeof r && r && r.__esModule) return r;
        var n = Object.create(null);
        if (i.r(n), Object.defineProperty(n, "default", {
            enumerable: !0,
            value: r
        }), 2 & e && "string" != typeof r) for (var t in r) i.d(n, t, function (e) {
            return r[e]
        }.bind(null, t));
        return n
    }, i.n = function (e) {
        var r = e && e.__esModule ? function () {
            return e.default
        } : function () {
            return e
        };
        return i.d(r, "a", r), r
    }, i.o = function (e, r) {
        return Object.prototype.hasOwnProperty.call(e, r)
    }, i.p = "/";
    var r = window.webpackJsonp = window.webpackJsonp || [], t = r.push.bind(r);
    r.push = e, r = r.slice();
    for (var o = 0; o < r.length; o++) e(r[o]);
    var s = t;
    a()
}([])</script>
<script src="./static/js/2.92847c53.chunk.js"></script>
<script src="./static/js/main.d914cf10.chunk.js"></script>
</body>
</html>

标签： reactjsreact-router

reactjs - 反应构建只能显示开始页面，但不能显示项目中的其他页面

问题描述

解决方案

推荐阅读