реагировать bootstrap Навбар не рендерится правильно в React js - PullRequest
Новая
       3

реагировать bootstrap Навбар не рендерится правильно в React js

3 голосов
/ 27 января 2020

Я использую bootstrap 4 с reactjs. Используя модуль response- bootstrap, пытаюсь визуализировать Navbar, но каким-то образом он не рендерит должным образом. Я использую синтаксис bootstrap 4 в коде, но не уверен, использует ли какой-либо модуль / lib какой-либо синтаксис bootstrap 3

. Вот код (Приложение. js): 

import React, { Component } from 'react';
import Header from './Components/HeaderComponents/header';
import Footer from './Components/FooterComponents/footer';
import Homepage from './Components/pages/homePage';
import { BrowserRouter as Router, Route } from 'react-router-dom';
import CustNavbar from './Components/pages/navbar';
import About from './Components/pages/About';

import News from './Components/pages/News';

import ReactBootstrap, { Navbar, Nav, NavItem, Jumbotron, Container, Row, Column, Image, Button } from 'react-bootstrap';
import './Assets/css/default.min.css';

class App extends Component {
  render() {
    return (

      <Router>
      <div className="App">
      <Navbar />
      <Route exact path="/" component={Homepage} />
      <Route path="/about" component={About} />
      <Route path="/news" component={News} />
      </div>
      </Router>
    );
  }
}


export default App;

и навигационная панель. js: 

import React, { Component } from 'react';
import ReactBootstrap, { Navbar, Nav, NavItem } from 'react-bootstrap';
import { Link } from 'react-router-dom';

class CustNavbar extends Component {
render() {
  return (

<Navbar default collapseOnSelect>
<Navbar.Header>
<Navbar.Brand>
  <Link to="/">CodeLife</Link>
</Navbar.Brand>
<Navbar.Toggle />
  </Navbar.Header>
  <Navbar.Collapse>
<Nav pullRight>
<NavItem eventKey={1} componentClass={Link} to="/">
Home
</NavItem>

<NavItem eventKey={2} componentClass={Link} to="/about">
About
</NavItem>
<NavItem eventKey={3} componentClass={Link} to="/news">
News
</NavItem>
</Nav>

</Navbar.Collapse>

</Navbar>

)
}
}

export default CustNavbar;

что происходит

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

что ожидается

Навигационная панель должна появиться на главной странице перед сеткой / контейнером

РЕДАКТИРОВАТЬ 1: I изменили код как предложено. пожалуйста, ниже:

Приложение. js

import React, { Fragment, Component } from 'react';
import Header from './Components/HeaderComponents/header';
import Footer from './Components/FooterComponents/footer';
import Homepage from './Components/pages/homePage';
import CorporateTraining from './Components/pages/corporateTraining';
import { BrowserRouter as Router, Route } from 'react-router-dom';
import CustNavbar from './Components/pages/navbar';
import About from './Components/pages/About';

import News from './Components/pages/News';

import ReactBootstrap, { Navbar, Nav, NavItem, Jumbotron, Container, Row, Column, Image, Button } from 'react-bootstrap';
import './Assets/css/default.min.css';

class App extends Component {
  render() {
    return (
    <Fragment>
    <Navbar />
      <div className="App">
      <Router>
      <Route exact path="/" component={Homepage} />
      <Route path="/about" component={About} />
      <Route path="/news" component={News} />

      </Router>
      </div>
      </Fragment>
    );
  }
}


export default App;

С уважением,

1 Ответ

3 голосов
/ 27 января 2020

Я не совсем уверен, так как это слишком неясно. Но попробуйте переместить навигационную панель поверх маршрутизатора, поскольку я предполагаю, что в приложении className есть стилизация. Дайте мне знать 

import React, { Fragment, Component } from 'react';
        ...

        return (
             <Fragment>
                  <Navbar />
                  <div className="App">
                    <Router>
                    <Switch>
                      <Route exact path="/" component={Homepage} />
                      <Route path="/about" component={About} />
                      <Route path="/news" component={News} />
                    </Switch
                    </Router>
                  </div>
          </Fragment>
    )

Не забудьте добавить Фрагмент

...