Как заставить реактор работать правильно с Netlify и производственной сборкой

Question

так что я новичок в React JS, когда у меня только базовые знания. Я создавал веб-приложение и запускаю с npm start. Теперь я хотел разместить и опубликовать свой веб-сайт, и через исследование наткнулся на Netlify. Как только я добавляю папку в netlify, веб-сайт размещается, и главная страница становится видимой, однако, когда я нажимаю на любую другую страницу, я получаю ошибку «Страница не найдена». Я также пробовал npm run build и открывал его с IP-адресом, который также выдает ошибку 404. Однако ранее использовался localhost 3000, который прекрасно работает.

У меня есть папка заголовка со ссылками href, которые указывают на /, / info, / abouts и т. Д. У меня есть реагирующий маршрутизатор в папке index.js внутри src, который указывает на файлы, Home, Info, About.

ЧТО Я ПРОБОВАЛ: Я попытался использовать файл _redirects, а затем / * npm / index.html 200, но это ничего не исправило.

Я не знаю, как на самом деле исправить это и заставить его работать, поэтому любая помощь будет высоко ценится!

Заголовочный файл

import React, { Component } from "react";
import "./header.css";
import Logo from "../../images/img/logo.jpg";


class Header extends Component {
  render() {
    return (
      <div className="Header">
        <header>
          <div id="logo">
            <img className="logo" src={Logo} alt="signature" />
          </div>

          <nav className="nav-bar">
            <nav className="home">
              <a href="/"> Home</a>
            </nav>
            <nav className="project">
              <a href="/projects">Projects</a>
            </nav>
            <nav className="moreinfo">
              <a href="/info">Info</a>
            </nav>
            <nav className="contact">
              <a href="/about">About</a>
            </nav>
          </nav>
        </header>
      </div>
    );
  }
}

export default Header;

Индексный файл

import React from "react";
import ReactDOM from "react-dom";
import "./index.css";
import App from "./App";
import About from "./Architectural_Design/views/About/About";
import Projects from "./Architectural_Design/views/Projects/Projects";
import Home from "./Architectural_Design/views/Home/Home";
import Body from "./Architectural_Design/Body_Main/Body";
import Info from "./Architectural_Design/views/Info/Info";
import Flex from "./Architectural_Design/Image_Component/flex";
import * as serviceWorker from "./serviceWorker";
import { BrowserRouter, Route } from "react-router-dom";

ReactDOM.render(
  <BrowserRouter>
    <div>
      <Route path="/about" component={About} />
      <Route exact path="/" component={Home} />
      <Route exact path="/projects" component={Projects} />
      <Route exact path="/info" component={Info} />
      <Route exact path="/body" component={Body} />
    </div>
  </BrowserRouter>,
  document.getElementById("root")
);

идеальный результат - достаточно простой способ изменить / добавить что-то, что заставило бы работать процесс маршрутизации.

Спасибо заранее всем !!