Я недавно начал работать с реагировать и создал в нем приложение.
В связи с проблемой в моем проекте несколько страниц, и он прекрасно работает на localhost . Но когда я создал Build для моего проекта. Я только вижу первую страницу в приложении и не могу видеть другие страницы в проекте.
Например:
http://website.com/login. Я могу получить доступ к этой странице, так как это начальная страница проекта.
Теперь, когда я переключаюсь на другие страницы. http://website.com/home. Я не могу посмотреть другие страницы . Просто сказано, что страница не найдена.
Ниже приведен код файла маршрутизатора
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>