Реактивные ссылки Bootstrap Navbar не работают, если их свернуть на маленьких экранах - PullRequest
Новая
       46

Реактивные ссылки Bootstrap Navbar не работают, если их свернуть на маленьких экранах

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

Я использую реагирующий бустрап.

Когда моя панель навигации сворачивается в окно среднего размера, ссылки кликабельны, как обычно, и работают. Однако в определенный момент и по размеру мобильного устройства ссылки в свернутой навигационной панели не активируются.

Код: 

import React from 'react';
import { BrowserRouter as Router, Route, Link} from 'react-router-dom';
import Container from 'react-bootstrap/Container';
import Navbar from 'react-bootstrap/Navbar'
import Nav from 'react-bootstrap/Nav'
import './App.css';
import Footer from './components/Footer';
import HomePage from './pages/HomePage';
import CVPage from './pages/CVPage';
import ProjectPage from './pages/ProjectPage';
import AboutPage from './pages/AboutPage';

class App extends React.Component {

  constructor(props) {
    super(props);
    this.state = {
      title: 'Name',
      home: {
        title: 'Name',
        subtitle: 'Computing Undergraduate',
        text: 'Click below.'
      },
      CV: {
        title: 'CV',
        subtitle: 'Click on my CV to download a PDF copy..'
      },
      about: {
        title: 'About Me'
      },
      projects: {
        ttle: 'Projects',
        subtitle: 'My GitHub projects are below.'
      }
    }
  }

  render() {
  return (
    <Router>
      <Container className="main-container p-0" fluid={true}>
        <Navbar bg="light" variant="light" expand="lg" className="border-bottom">
          <Navbar.Brand>Name</Navbar.Brand>
          <Navbar.Toggle className="border-1" aria-controls="navbar-toggle"/>
          <Navbar.Collapse id="navbar-toggle" className="variant-light">
            <Nav className="ml-auto">
              <Link className="nav-link" to="/">Home</Link>
              <Link className="nav-link" to="/cv">CV</Link>
            </Nav>
          </Navbar.Collapse>
        </Navbar>
        <Route path="/" exact render={() => <HomePage title={this.state.home.title} subtitle={this.state.home.subtitle} text={this.state.home.text}/> }/>
        <Route path="/cv" exact render={() => <CVPage title={this.state.CV.title} subtitle={this.state.CV.subtitle}/> }/>
        <Route path="/projects" exact render={() => <ProjectPage title={this.state.projects.title} subtitle={this.state.projects.subtitle}/> }/>
        <Route path="/about" exact render={() => <AboutPage title={this.state.about.title}/> }/>
        <Footer/>
      </Container>
    </Router>
    );
  }
}

export default App;
...