404 с React Router, который я не могу воспроизвести локально

Question

Я новичок в React, и мне нужно исправить ошибку на небольшом статическом сайте, когда я захожу на: https://sunchain.fr/en

, это даст мне 404 (моя страница размещена на страницах gitlab, так что у вас 404 есть логотип gitlab)

Но когда я перехожу на http://localhost:3000/en, он работает.

Вот файл, в котором я определяю свои ссылки:

import React from "react";
import PropTypes from "prop-types";
import {Link} from "react-router-dom";
import "./style.css";
import logo from "../../media/svg/_LOGO_CONTOUR_BLANC.svg";

export const Header = ({
    linklogo,
    concept,
    autoconso,
    techno,
    appli,
    team,
    news,
    language
}) => (
    <div className="header">
        <div className="wrapper-header">
            <a href={linklogo} id="logo" className={logo}>
                &nbsp;
            </a>
            <nav>
                <ul>
                    {concept}
                    {autoconso}
                    {techno}
                    {appli}
                    {team}
                    {news}
                    {language}
                </ul>
            </nav>
        </div>
    </div>
);

Header.propTypes = {
    concept: PropTypes.object,
    autoconso: PropTypes.object,
    techno: PropTypes.object,
    appli: PropTypes.object,
    team: PropTypes.object,
    news: PropTypes.object,
    language: PropTypes.object
};

export default Header;

export const HeaderFr = props => (
    <Header
        {...props}
        linklogo="/"
        concept={
            <a href="/#concept">
                <li>CONCEPT</li>
            </a>
        }
        autoconso={
            <a href="/#autoconsocoll">
                <li>AUTOCONSO</li>
            </a>
        }
        techno={
            <a href="/#techno">
                <li>TECHNO</li>
            </a>
        }
        appli={
            <a href="/#appli">
                <li>APPLICATIONS</li>
            </a>
        }
        team={
            <a href="/#team">
                <li>ÉQUIPE</li>
            </a>
        }
        news={
            <a href="/#news">
                <li>ACTUALITÉS</li>
            </a>
        }
        language={
            <Link to="/en">
                <li className="lang">ENGLISH</li>
            </Link>
        }
    />
);

export const HeaderEn = props => (
    <Header
        {...props}
        linklogo="/en"
        concept={
            <a href="/en#concept">
                <li>CONCEPT</li>
            </a>
        }
        autoconso={
            <a href="/en#autoconsocoll">
                <li>USE CASE</li>
            </a>
        }
        techno={
            <a href="/en#techno">
                <li>TECHNO</li>
            </a>
        }
        appli={
            <a href="/en#appli">
                <li>APPLICATIONS</li>
            </a>
        }
        team={
            <a href="/en#team">
                <li>TEAM</li>
            </a>
        }
        news={
            <a href="/en#news">
                <li>NEWS</li>
            </a>
        }
        language={
            <Link to="/">
                <li className="lang">FRANÇAIS</li>
            </Link>
        }
    />
);

Я также определил свои маршруты следующим образом:

                <Route history={browserHistory} path="/en">
                    <HomeLayoutEn />
                </Route>
                <Route history={browserHistory} exact path="/">
                    <HomeLayoutFr />
                </Route>

Обе версии одинаковы, так как я использую Непрерывное развертывание для отправки в производство

Есть идеи?

Answer 1

Ну, когда я перехожу к https://sunchain.fr/,, он загружается нормально.Тогда выбор 'english' для перехода на https://sunchain.fr/en/ также работает.Проблема при выполнении полной перезагрузки на этой странице будет 404.

Я подозреваю, что проблема похожа на эта .Маршрутизация вашего приложения не может сохраняться при обновлении, и вы, вероятно, найдете здесь четкое объяснение / исправление.