Не показывается проект

Залил на гитхаб-пейджес проект, но заметил что кроме главной страницы("/") ничего не прогружает, на какую бы страницу я в навбаре не перешел выдает 404. Что я только не пытался зделать, по-сути сначало даже главная страница выдавала 404, я использовал(process.env.PUBLIC_URL) и это помогло, но как бы я его не втыкал в другие страницы, ничего не поменялось. Что я пытался зделать:

  • добавлять HashRouter и BrowseRouter в саму апку.

  • добавлять разные елементы в сам html код.

Реально ничего не помогло

Header.js:

import React, { Component } from "react";
import { Navbar, Nav, Container, Form } from "react-bootstrap";
import { BrowserRouter as Router, Switch, Route } from "react-router-dom";

//import Home from "../Pages/Home";
import About from "../Pages/About";
import Contacts from "../Pages/Contacts";
import Register from "../Pages/Register";
import Login from "../Pages/Login";
import background from "../Pages/background";

export default class Header extends Component {
  render() {
    return (
      <>
        <Navbar
          className="navbar-custom"
          collapseOnSelect
          expand="md"
          variant="dark"
        >
          <Container>
            <Navbar.Brand href={process.env.PUBLIC_URL + "/"}>WanderLance</Navbar.Brand>
            <Navbar.Toggle aria-controls="responsive-navbar-nav" />
            <Navbar.Collapse id="responsive-navbar-nav">
              <Nav className="mr-auto">
                <Nav.Link href={process.env.PUBLIC_URL + "/"}>Home</Nav.Link>
                <Nav.Link href="/about">About</Nav.Link>
                <Nav.Link href="/contacts">Contacts</Nav.Link>
                <Nav.Link href="/login">Login</Nav.Link>
              </Nav>
              <Form className="cA" inline>
                <div className="cA">
                  <button type="submit">Click here to make smth</button>
                </div>
              </Form>
            </Navbar.Collapse>
          </Container>
        </Navbar>

        <Router>
          <Switch>
            <Route path={process.env.PUBLIC_URL + "/"} component={background} />
            <Route exact path="/about" component={About} />
            <Route exact path="/contacts" component={Contacts} />
            <Route exact path="/register" component={Register} />
            <Route exact path="/login" component={Login} />
          </Switch>
        </Router>
      </>
    );
  }
}

App.js:

import React from 'react';
import './Pages/App.css';
import 'bootstrap/dist/css/bootstrap.min.css';
import Header from "./Components/Header";
import { HashRouter } from 'react-router-dom';

function App() 
{
  return (
    <HashRouter>
      <Header />
    </HashRouter>
  );
}

export default App;

404


Ответы (1 шт):

Автор решения: Kekw1x

Проблема была в том, что:

  1. Я неправильно указал сылки на мой репозиторий
  2. Нужно было почистить куки в браузере
  3. Нужно было использовать Hashrouter(BrowserRouter не работает)

P.S:process.env.PUBLIC_URL можно убрать.

  1. пример правильной сылки :

       <Nav.Link href="http://gitname.github.io/react-gh-pages/?#/">Home</Nav.Link>
       <Nav.Link href="http://gitname.github.io/react-gh-pages/?#/about">About</Nav.Link>
       <Nav.Link href="http://gitname.github.io/react-gh-pages/?#/contacts">Contacts</Nav.Link>
       <Nav.Link href="http://gitname.github.io/react-gh-pages/?#/login">Login</Nav.Link>
    
  2. меняем импорт на:

       import { HashRouter as Router, Switch, Route } from "react-router-dom";
    

Впринципе все, надеюсь вам это помогло...

→ Ссылка