React-Router, проблемы с gh-страницами - PullRequest
Новая
       37

React-Router, проблемы с gh-страницами

1 голос
/ 21 апреля 2020

Я пытаюсь развернуть приложение create-реагировать на страницы GitHub. Я использую response-router-dom, и я установил домашнюю страницу "http://username.github.io/myproject" в пакетах. json, но я получил github 404, когда я пытаюсь ввести путь напрямую " https://username.github.io/myproject/About "если я введу неправильное имя пути, это приведет меня на мою пользовательскую страницу NoMatch" https://username.github.io/myproject/Abut "

Мое приложение. js Файл 

import React from 'react';
import './App.css';
import 'bootstrap/dist/css/bootstrap.min.css';
import { BrowserRouter as Router, Route, Switch} from 'react-router-dom';
import  NavigationBar  from './components/NavigationBar';
import { Footer } from './components/Footer';
import { Home } from './Home';
import { NoMatch } from './NoMatch';
import { Contact } from './Contact';
import { About } from './About';
import { Partners } from './Partners';
import  { Projects }  from './Projects';
import Services from './Services';

function App() {
  return (
    <React.Fragment>
    <NavigationBar/>
      <Router basename="/project-se">
        <Switch>
          <Route exact path="/" component={Home}/>
          <Route path="/About" component={About} />
          <Route path="/Services" component={Services} />
          <Route path="/Projects" component={Projects} />
          <Route path="/Partners" component={Partners} />
          <Route path="/Contact" component={Contact} />
          <Route component={NoMatch} />
        </Switch>
      </Router>
      <Footer />
    </React.Fragment>
  );
}

export default App;

ЗДЕСЬ МОЙ КОМПОНЕНТ НАВИГАЦИИ 

import React from 'react';
import { Nav, Navbar } from 'react-bootstrap';
import styled from 'styled-components';

const Styles= styled.div`

    .navbar-brand,
    .navbar-nav .nav-item .nav-link {
        color: #fff;
        &:hover {
        color: #fb7840;
        }
    }

    .navbar-toggle-icon  {
        background-image: url("data:image/svg+xml;");
        color:#fff;
    }
`;

export default function NavigationBar() {
    return (
        <Styles>
            <Navbar  variant="dark" expand="lg" sticky="top"  style={{backgroundColor: "#000", color: "#fff", borderBottom: "1px solid #fb7840"}}>
                <Navbar.Brand href="/" style={{ fontSize: "24px", fontWeight: "10em" }}>SARWAR ENTERPRISES</Navbar.Brand>
                <Navbar.Toggle aria-controls="responsive-navbar-nav" className="toggler"/>
                <Navbar.Collapse id="responsive-navbar-nav">
                    <Nav className="ml-auto">
                    <Nav.Item><Nav.Link href="/">HOME</Nav.Link></Nav.Item>
                    <Nav.Item><Nav.Link href="/About">ABOUT</Nav.Link></Nav.Item>
                    <Nav.Item><Nav.Link href="/Services">SERVICES</Nav.Link></Nav.Item>
                    <Nav.Item><Nav.Link href="/Projects">PROJECTS</Nav.Link></Nav.Item>
                    <Nav.Item><Nav.Link href="/Partners">PARTNERS</Nav.Link></Nav.Item>
                    <Nav.Item><Nav.Link href="/Contact">CONTACT</Nav.Link></Nav.Item>
                    </Nav>
                </Navbar.Collapse>
                </Navbar>
        </Styles>
    );
}

1 Ответ

0 голосов
/ 21 апреля 2020

Вы можете установить базовый URL 

<Router basename={process.env.PUBLIC_URL}>
</Router>

Например: 

<BrowserRouter basename="/calendar" />
<Link to="/today"/> // renders <a href="/calendar/today">
...