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上执行硬重装。

我怀疑问题类似于this one。您的应用程序路由无法持续刷新，因此您可能会在此处找到清晰的说明/修复程序。

我无法在本地复制的带有React Router的404

1 个答案: