reactjs - 404 与我无法在本地重现的 React 路由器

问题描述

我是 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>

两个版本相同，因为我使用持续部署将其发送到生产环境

任何想法？

标签： reactjsreact-router

reactjs - 404 与我无法在本地重现的 React 路由器

问题描述

解决方案

推荐阅读