ReactJS Bootstrap Navbar и Routing не работают вместе

Question

Я пытаюсь создать простое веб-приложение, используя ReactJS, и я хотел использовать Navbar, предоставляемый React-Bootstrap.

Я создал файл Navigation.js, содержащий класс Navigation, чтобы отделить Navbar и Маршрутизацию от файла App.js.Однако обе части, похоже, не работают.Когда я загружаю страницу, она просто пуста, там нет Навбара.Кто-нибудь может обнаружить ошибку?

Navigation.js:

import React, { Component } from 'react';
import { Navbar, Nav, Form, FormControl, Button, NavItem } from 'react-bootstrap';
import { Switch, Route } from 'react-router-dom';
import { Home } from './Page';

class Navigation extends Component {
    render() {
        return (
            <div>
                <div>
                    <Navbar>
                        <Navbar.Brand href="/">React-Bootstrap</Navbar.Brand>
                        <Navbar.Collapse>
                            <Nav className="mr-auto">
                                <NavItem eventkey={1} href="/">
                                    <Nav.Link href="/">Home</Nav.Link>
                                </NavItem>
                            </Nav>
                            <Form inline>
                                <FormControl type="text" placeholder="Search" className="mr-sm-2" />
                                <Button variant="outline-success">Search</Button>
                            </Form>
                        </Navbar.Collapse>
                    </Navbar>
                </div>
                <div>
                    <Switch>
                        <Route exact path='/' component={Home} />
                        <Route render={function () {
                            return <p>Not found</p>
                        }} />
                    </Switch>
                </div>
            </div>
        );
    }
}

export default Navigation;

App.js:

import React, { Component } from 'react';
import Navigation from './components/routing/Navigation';



class App extends Component {
  render() {
    return (
      <div id="App">
        <Navigation />
      </div>
    );
  }
}

export default App;

Я пытался использовать NavItem, содержащий LinkContainerс react-router-bootstrap уже, что привело к тому же результату.

Только для полноты, Page.js:

import React, { Component } from 'react';
import { Link } from 'react-router-dom';

export const Page = ({ title }) => (
    <div className="App">
      <div className="App-header">
        <h2>{title}</h2>
      </div>
      <p className="App-intro">
        This is the {title} page.
      </p>
      <p>
        <Link to="/">Home</Link>
      </p>
      <p>
        <Link to="/about">About</Link>
      </p>
      <p>
        <Link to="/settings">Settings</Link>
      </p>
    </div>
);


export const About = (props) => (
    <Page title="About"/>
);

export  const Settings = (props) => (
    <Page title="Settings"/>
);

export const Home = (props) => (
    <Page title="Home"/>
);

Answer 1

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

https://react -bootstrap.github.io / Getting-Start / вводный /

или просто добавьте следующее в ur index.html

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous" />

Answer 2

Прежде всего, в ваших фрагментах не похоже, что вы оборачиваете свой код в Router, поэтому вам следует убедиться, что вы делаете это внутри App или в ReactDOM.render:

import { BrowserRouter } from 'react-router-dom';

ReactDOM.render(
  <BrowserRouter>
    <App />
  </BrowserRouter>, 
  rootElement
  );

Далее, ваша конкретная проблема заключается в том, что вы визуализируете Nav.Link реагирующего загрузчика вместо компонента Link реагирующего маршрутизатора, поэтому маршрутизатор не принимает изменения вашего маршрута.К счастью, response-bootstrap предоставляет реквизит рендеринга в большинстве своих компонентов, чтобы указать, какой компонент или элемент вы хотите визуализировать, если вы не хотите использовать значение по умолчанию.Переключитесь на что-то вроде этого:

import { Switch, Route, Link } from 'react-router-dom';

class Navigation extends Component {
  render() {
    return (
      <div>
        <div>
          <Navbar>
            <Navbar.Brand as={Link} to="/" >React-Bootstrap</Navbar.Brand>
            <Navbar.Collapse>
              <Nav className="mr-auto">
                <NavItem eventkey={1} href="/">
                  <Nav.Link as={Link} to="/" >Home</Nav.Link>
                </NavItem>
              </Nav>
              <Form inline>
                <FormControl type="text" placeholder="Search" className="mr-sm-2" />
                <Button variant="outline-success">Search</Button>
              </Form>
            </Navbar.Collapse>
          </Navbar>
        </div>
        <div>
          <Switch>
            <Route exact path='/' component={Home} />
            <Route render={function () {
              return <p>Not found</p>
            }} />
          </Switch>
        </div>
      </div>
    );
  }
}