ReactJS Bootstrap Navbar und Routing funktionieren nicht zusammen

Question 1

Ich versuche, eine einfache Webanwendung mit ReactJS zu erstellen, und ich wollte die verwenden Navbar bereitgestellt von React-Bootstrap.

Ich habe eine erstellt Navigation.js Datei, die eine Klasse enthält Navigation die zu trennen Navbar und das Routing von der App.js Datei. Allerdings scheinen beide Teile nicht zu funktionieren. Wenn ich die Seite lade, ist sie einfach leer, es gibt keine Navigationsleiste. Kann jemand einen Fehler erkennen?

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="https://stackoverflow.com/">React-Bootstrap</Navbar.Brand>
                        <Navbar.Collapse>
                            <Nav className="mr-auto">
                                <NavItem eventkey={1} href="https://stackoverflow.com/">
                                    <Nav.Link href="https://stackoverflow.com/">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="https://stackoverflow.com/" 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;

Ich habe es mit einem versucht NavItem enthält a LinkContainer aus react-router-bootstrap bereits, was zum gleichen Ergebnis führte.

Nur der Vollständigkeit halber, 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="https://stackoverflow.com/">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"/>
);

Question 2

Erstens sieht es in Ihren Snippets nicht so aus, als würden Sie Ihren Code in ein Paket verpacken Routeralso sollten Sie sicherstellen, dass Sie das im Inneren tun App oder in ReactDOM.render:

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

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

Als nächstes besteht Ihr spezifisches Problem darin, dass Sie React-Bootstraps rendern Nav.Link anstelle von React-Router Link Komponente, sodass der Router Ihre Routenänderungen nicht aufnimmt. Glücklicherweise bietet React-Bootstrap in den meisten seiner Komponenten eine Render-Requisite, um anzugeben, welche Komponente oder welches Element Sie rendern möchten, wenn Sie nicht die Standardeinstellung wünschen. Wechseln Sie zu etwas wie diesem:

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

class Navigation extends Component {
  render() {
    return (
      <div>
        <div>
          <Navbar>
            <Navbar.Brand as={Link} to="https://stackoverflow.com/" >React-Bootstrap</Navbar.Brand>
            <Navbar.Collapse>
              <Nav className="mr-auto">
                <NavItem eventkey={1} href="https://stackoverflow.com/">
                  <Nav.Link as={Link} to="https://stackoverflow.com/" >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="https://stackoverflow.com/" component={Home} />
            <Route render={function () {
              return <p>Not found</p>
            }} />
          </Switch>
        </div>
      </div>
    );
  }
}

Question 3

Für diejenigen, die ein Problem mit dem Styling haben Link Komponente aus react-router-dom Fügen Sie einfach in der React-Bootstrap-Navigationsleiste hinzu className="nav-link"so was:

<Link to="/" className="nav-link">Home</Link>

anstatt

<Nav.Link href="/">Home</Nav.Link>

Question 4

Ich hoffe, ich bin nicht zu spät, um einigen anderen Leuten zu helfen, die versuchen, dieses Problem zu lösen.

Sie können den NavLink anstelle von as={Link} verwenden. Es wird mit dem gleichen Verhalten wie Link gerendert, „beobachtet“ jedoch die Router-URL, um zu definieren, welcher Link tatsächlich aktiv ist:

<Nav defaultActiveKey="/bills" as="ul">
      <Nav.Item as="li">
        <Nav.Link as={NavLink} to="/bills">Dividas</Nav.Link>
      </Nav.Item>
      <Nav.Item as="li">
        <Nav.Link as={NavLink} to="/other">Em construção</Nav.Link>
      </Nav.Item>
    </Nav>

Question 5

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

ReactDOM.render(
<BrowserRouter>
<App />
</BrowserRouter>,
document.getElementById('root')
);

und Navbar.js:

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

<Nav className="ml-auto">
<NavItem>   <Link className="nav-link"   to="https://stackoverflow.com/">Home</Link> </NavItem> 
<NavItem>   <Link  className="nav-link" to="/about">About</Link> </NavItem> 
<NavItem>    <Link className="nav-link"   to="/contact">Contact</Link> </NavItem> 
</Nav>

Dadurch wurde Folgendes behoben: <Link> außerhalb a <Router> Fehler für mich.

Question 6

Derzeit funktioniert der Ansatz mit React v18 und React-Router v6.4 für mich etwas anders.

Damit die Links mit React-Route ordnungsgemäß funktionieren, verwenden Sie sie as={Link} im Nav.Link Artikel.

Und um die Registerkarten hervorzuheben, müssen Sie sie verwenden eventKey wie beschrieben in der Dokumentation: EventKey wird verwendet, um den aktiven Status des übergeordneten Nav zu bestimmen und zu steuern

Hier ist ein Beispiel.

Beachten Sie, dass sich die Änderungen auch auf die auswirken Navbar.Brand Komponente.

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

const AppNavbar = () => {
  const location = useLocation();

  const activeKey = location.pathname === "https://stackoverflow.com/" ? '/projects' : location.pathname;

  return (
    <Navbar expand="lg" className="theme-navbar">
      <Container>
        <Navbar.Brand as={Link} to="/">
          My Projects
        </Navbar.Brand>
        <Navbar.Toggle aria-controls="basic-navbar-nav" />
        <Navbar.Collapse id="basic-navbar-nav">
          <Nav activeKey={activeKey} className="me-auto">
            <Nav.Link as={Link} eventKey="/projects" to="/projects">
              Projects
            </Nav.Link>
            <Nav.Link as={Link} eventKey="/work" to="/work">
              Ongoing Tasks
            </Nav.Link>
          </Nav>
        </Navbar.Collapse>
      </Container>
    </Navbar>
  );
};

Question 7

Nachdem ich mich mit einem Projekt von nicht trivialer Größe konfrontiert sah, das bereits jQuery als Abhängigkeit hatte, konnte ich die Nichtübereinstimmung zwischen React-Router und React-Bootstrap mit einem Event-Listener auf dem problemlos lösen document.

Dies hat gegenüber anderen Lösungen den Vorteil, dass keine Änderungen am aktuellen Markup erforderlich sind. Möglicherweise muss jedoch eine zusätzliche Logik zum Schutz geschrieben werden history.push je nach Bedarf anrufen. Möglicherweise muss dies auch erweitert werden, um den Schutz zu gewährleisten target Attribut, z.B target="_blank".

Wenn jQuery nicht gewünscht ist, kann man möglicherweise eine Vanilla-JS-Implementierung damit schreiben document.addEventListener ohne großen Mehraufwand.

// react-router@5
// usage of history may vary depending on version
import { Router } from 'react-router-dom';
import { createBrowserHistory } from 'history';

const history = createBrowserHistory();

// IIFE scoping jQuery for us
(($) => {
  // Wait for document ready
  $(() => {
    $(document).on('click', '[href]', (event) => {
      // Only target links targeting our application's origin
      if (event.currentTarget.href.indexOf(window.location.origin) === 0) {
        // Prevent standard browser navigation
        event.preventDefault();

        const path = event.currentTarget.href.slice(window.location.origin.length);

        history.push(path);
      }
    });
  });
})(jQuery);

const Routing = (props) => (
  <Router history={ history }>
    ...
  </Router>
);

Question 8

Ich glaube, Sie haben vergessen, Bootstrap-CSS einzuschließen. Weitere Informationen finden Sie im Abschnitt „Stylesheets“ im folgenden Dokument

https://react-bootstrap.github.io/getting-started/introduction/

oder fügen Sie einfach Folgendes zu Ihrer index.html hinzu

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