Блог

Я потратил много времени на воспроизведение проблемы в codesandbox: https://codesandbox.io/s/debugrouter-fcznq

Если кто-нибудь может понять, почему тестовый компонент не отображается: https://fcznq.csb.app/test

Я был бы очень признателен.

…

Однако по какой-то странной причине https://fcznq.csb.app/access-denied рендерится просто отлично.

И https://fcznq.csb.app / рендерится просто отлично

Маршруты следующие…

 import "react-app-polyfill/ie11";
import "react-app-polyfill/stable";
import React from "react";
import { render } from "react-dom";
import { BrowserRouter as Router, Route, Switch } from "react-router-dom";
import "./index.css";
import * as serviceWorker from "./serviceWorker.js";

// Components
import App from "./App";
import AccessDenied from "./Pages/AccessDenied.js";
import Home from "./Pages/Home.js";
import Test from "./Pages/Test.js";
// Globals
import { frontendLinks } from "./Globals/index.js";
render(
  <Router basename={process.env.PUBLIC_URL}>
    <App>
      <Switch>
        <Route exact path={frontendLinks.accessDenied} component={AccessDenied} />
        <Route exact path={frontendLinks.test} component={Test} />
        <Route exact path={frontendLinks.home} component={Home} />
      </Switch>
    </App>
  </Router>,
  document.getElementById("root")
);

serviceWorker.unregister();
  

App.js

 import React, { useState } from "react";
import { Helmet } from "react-helmet";
import UserImage from "./img/user-default.png";

// Components
import Header from "./Components/Header.js";

// Globals
import { guestUserId, userTypeIds } from "./Globals/index.js";
import { GlobalContext } from "./Globals/GlobalContext.js";

function App(props) {
  // Variables
  const [userIdentity] = useState({
    userId: guestUserId,
    name: "",
    userTypeId: userTypeIds.guest,
    lobTagIds: [],
    photoUrl: UserImage,
    email: "",
    isLoaded: false
  });
  // Render
  return (
    <div className="app">
      <Helmet>
        <meta charSet="utf-8" />
        <title>Project</title>
      </Helmet>
      <GlobalContext.Provider value={{ userIdentity }}>
        <Header />
        <div className="app-container">{props.children}</div>
      </GlobalContext.Provider>
    </div>
  );
}

export default App;
  

AccessDenied.js — РАБОТАЕТ

 import React from "react";
import { Helmet } from "react-helmet";

const AccessDenied = () => {
  return (
    <div className="page-container">
      <Helmet>
        <title>Access Denied</title>
        <meta name="description" content="Nested component" />
      </Helmet>
      <h1>Access Denied</h1>
    </div>
  );
};

export default AccessDenied;
  

Home.js — РАБОТАЕТ

 import React from "react";

const Home = () => {
  return (
    <div className="page-container">
      <h1>This is the Home page</h1>
    </div>
  );
};

export default Home;
  

Test.js — НЕ РАБОТАЕТ

 import React from "react";
const Test = () => {
  return (
    <div className="page-container">
      <h1>This is the Test page</h1>
    </div>
  );
};

export default Test;
  

у вас просто есть изменения в variable.js файл

 const frontendLinks = {
    accessDenied: "/access-denied",
    home: "/",
    test: "/test" // put a slash before path
};