Не показывается проект
Залил на гитхаб-пейджес проект, но заметил что кроме главной страницы("/") ничего не прогружает, на какую бы страницу я в навбаре не перешел выдает 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;
Ответы (1 шт):
Автор решения: Kekw1x
→ Ссылка
Проблема была в том, что:
- Я неправильно указал сылки на мой репозиторий
- Нужно было почистить куки в браузере
- Нужно было использовать Hashrouter(BrowserRouter не работает)
P.S:process.env.PUBLIC_URL можно убрать.
пример правильной сылки :
<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>меняем импорт на:
import { HashRouter as Router, Switch, Route } from "react-router-dom";
Впринципе все, надеюсь вам это помогло...
